rgba实现背景颜色透明
2016-03-02 08:59
537 查看
转载自:http://blog.csdn.net/hsliwei/article/details/6826986
所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。
RGBA颜色归为CSS3属性,其余RGB的区别在于多了个A,也就是Alpha透明度,这是个很好的东西啊,我们以后要实现半透明效果(无论是背景,边框,文字颜色等都可以用半透明实现了),但是,一向不紧不慢,孤芳自赏的IE家族,目前为止还不支持rgba颜色,真是让人哀叹啊!
对于rgba的使用,您可以参见下面的简单示例:
其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。
正如上表所展示的,IE8及其以下都对实用的rgba颜色不支持,怎么半呢?
其实细想一下,rgba颜色多了个什么东西呢,不就是半透明吗,IE不是由半透明滤镜嘛,我们只要使用:
不也很ok吗?
但是其实完全不是那么回事,IE半透明滤镜透明的是整个元素,它不能只透明元素的边框或者只透明文字的投影。
车到山前必有路,IE下某一属性是可以实现类似于rgba的效果的,那就是半透明背景
此滤镜上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最简单的使用如下:
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。
FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
如下代码:
这样就解决浏览器统一了
所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。
RGBA颜色归为CSS3属性,其余RGB的区别在于多了个A,也就是Alpha透明度,这是个很好的东西啊,我们以后要实现半透明效果(无论是背景,边框,文字颜色等都可以用半透明实现了),但是,一向不紧不慢,孤芳自赏的IE家族,目前为止还不支持rgba颜色,真是让人哀叹啊!
对于rgba的使用,您可以参见下面的简单示例:
background:rgba(200, 54, 54, 0.5);
其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。
正如上表所展示的,IE8及其以下都对实用的rgba颜色不支持,怎么半呢?
其实细想一下,rgba颜色多了个什么东西呢,不就是半透明吗,IE不是由半透明滤镜嘛,我们只要使用:
filter:alpha(opacity=50);
不也很ok吗?
但是其实完全不是那么回事,IE半透明滤镜透明的是整个元素,它不能只透明元素的边框或者只透明文字的投影。
车到山前必有路,IE下某一属性是可以实现类似于rgba的效果的,那就是半透明背景
此滤镜上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最简单的使用如下:
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。
FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
如下代码:
background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
这样就解决浏览器统一了
相关文章推荐
- js+css实现回到顶部按钮(back to top)
- 利用@media screen实现网页布局的自适应
- CSS学习(四)-css边框样式(下)
- js+css实现回到顶部按钮(back to top)
- 深入理解CSS背景
- CSS3学习
- DOM-设置样式
- DOM-元素的属性,样式
- 作品第四课----css函数一设置/读取对象的属性
- HTML-CSS文件链接HTML的三种方式
- CSS---@import
- CSS---!important
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3媒介查询
- back to top 回到顶部按钮 css+js
- CSS3:有雪花的导航栏实例
- 针对铁定浏览器的css选择符
- CSS布局总结
- CSS中cursor的pointer 与 hand-备
- CSS居中的方法总结