css3新特性@rgba
1.rgba也经常在实际应用中使用，它主要是在原来rgb的基础上添加了一透明度。但是他又和opacity又有一些差别，主要体现在对子元素的透明度的影响上。
例如：使用opacity和background属性设置元素的背景色和透明度，其子元素的透明度跟着父元素一起变化。
<!DOCTYPE html>
<html>
<head>
<title>css3</title>
</head>
<style type="text/css">
.example{
width:100%;
height:500px;
background: yellow;
opacity: 0.1;
color:red;
font-size: 50px;
}
.example2{
background: blue;
width: 200px;
height:300px;
}
.example3{
background: blue;
}
</style>
<body>
<div class="example">
<div class="example2">
111
</div>
</div>
<div class="example3">
background
</div>
</body>
</html>
但是rgba（）对子元素的透明度没有影响
<!DOCTYPE html>
<html>
<head>
<title>css3</title>
</head>
<style type="text/css">
.example{
width:100%;
height:500px;
background: rgba(0,0,0,.1);
color:red;
font-size: 50px;
}
.example2{
background: yellow;
width: 200px;
height:300px;
} </style>
<body>
<div class="example">
<div class="example2">
111
</div>
</div> </body>
</html>
参考：http://www.w3cplus.com/content/css3-rgba
css3新特性@rgba的更多相关文章
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
随机推荐
- python基础之迭代与解析
先简单看一下文件迭代器 >>> f=open('file1') >>> f.readline() "'aaa','bbb','ccc'\n" & ...
- JS中Array详细用法
1.数组的创建 var name= new Array(); //创建一个数组 name[0]="zhangsan"; //给数组赋值 name[1]="lisi&q ...
- 在VS中操作Mysql数据库
1.实现mysql数据库与VS的连接,需要安装两个插件,作者装的是mysql-connector-net-6.9.9.msi和 mysql-for-visualstudio-1.2.6.msi. 2. ...
- A way to connect to network through WIFI on Centos 7
I bought a DELL laptop,but can not connect to network through wifi.There's lots of methods on the In ...
- webform JS打印方法
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DaYin.aspx.cs&qu ...
- python读取excel数据，并可视化展现
#-*- coding: utf-8 -*- import pandas as pda import matplotlib.pyplot as pyl import matplotlib.font_m ...
- Entity Framework走马观花之把握全局 （转）
上一篇<Entity Framework技术导游系列开篇与热身 > ========================================= 在深入学习某项技术之前,应该努力形成 ...
- eclipse重定向输入输出到文件
最近在学习算法第四版,为了要用作者给的测试数据alg4-data,需要将数据直接导入到程序中.在作者的示例代码里用了重定向来做这个事情,但是在eclipse里使用重定向很不方便,查了很多资料,都说是在 ...
- Ogre 1.9 Android移植
Ogre 1.9 Android移植 分类: 图形渲染2013-02-04 16:47 3860人阅读 评论(14) 收藏 举报 Android Ogre C++linuxLinuxLINUX 上一篇 ...
- Ext.get Ext.getDom Ext.getCmp 的区别
Html DOM Ext Element Component Component 最高层 Html DOM 最基础 Ext.getCmp 是 Ext.ComponentMgr.get ...