CSS特效之透明 rgba
2013-04-07 19:54
176 查看
rgba
语法
R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数| 百分数 A:透明度。取值0~1之间
说明
RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。
纯色不透明
.rgba-1{ width:50px; height:50px; background:rgb(255,0,0); }
不透明度0.8
.rgba-2{ width:50px; height:50px; background:rgba(255,0,0,.8); }
不透明度0.6
.rgba-3{ width:50px; height:50px; background:rgba(255,0,0,.6); }
不透明度0.4
.rgba-2{ width:50px; height:50px; background:rgba(255,0,0,.4); }
不透明度0.2
.rgba-3{ width:50px; height:50px; background:rgba(255,0,0,.2); }
不透明度0 完全透明
.rgba-3{ width:50px; height:50px; background:rgba(255,0,0,0); border:1px solid #ccc;/*加边框看得清楚*/ }
对比
10.8
0.6
0.4
0.2
0
相关文章推荐
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- CSS通过RGBa将一个元素设置为透明效果
- CSS实现透明效果颜色的方法:RGBa
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- 透明-----css的filter,opacity与css3的background-color: rgba
- css两种让div背景透明文案不透明的方式(opacity、rgba)
- 自己写的css鼠标经过特效的横向导航
- CSS实现背景透明而背景上的文字不透明
- CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
- 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
- css实现背景透明文字不透明
- CSS实现背景透明,文字不透明,兼容所有浏览器
- CSS实现DIV层背景透明而文字不透明
- JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
- 兼容主流浏览器的CSS透明代码
- CSS中的Filter样式特效2
- CSS实现父层透明,子层不透明
- 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现
- javascript 可控式透明特效实现代码