IE8下兼容rgba颜色的半透明背景
2017-05-26 14:47
211 查看
在工作中做一个图片半透明遮罩时发现在IE8下不兼容
一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了。
先说说rgba的含义:
r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。
网上的解决方法是:
background: rgba(0,0,0,.5); /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的,但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
解释下#7f000000,第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(0,0,0,)对应#000;都是黑色。
到这里,rgba的用法就可以兼容IE8了。
但是经过实践发现这种方法只能用在背景色上,前景色或其他则无能为力了
如果您对本文有什么疑问,欢迎提出个人见解,若您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力, 欢迎您持续关注我的博客:)
一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了。
先说说rgba的含义:
r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。
网上的解决方法是:
background: rgba(0,0,0,.5); /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的,但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
解释下#7f000000,第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(0,0,0,)对应#000;都是黑色。
到这里,rgba的用法就可以兼容IE8了。
但是经过实践发现这种方法只能用在背景色上,前景色或其他则无能为力了
如果您对本文有什么疑问,欢迎提出个人见解,若您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力, 欢迎您持续关注我的博客:)
相关文章推荐
- IE8下兼容rgba颜色的半透明背景
- IE8下兼容rgba颜色的半透明背景
- IE8下兼容rgba颜色的半透明背景
- IE8及以下版本,兼容rgba颜色的半透明背景
- IE8下兼容rgba颜色的半透明背景
- 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8
- 背景颜色透明度- IE8兼容rgba-滤镜filter的用法
- 兼容各个浏览器css背景颜色半透明
- CSS背景颜色转换(自动生成IE8以下的filter,兼容IE9)
- div+css 如何让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff
- 让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff
- div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
- div+css 如何让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff 【转】
- Css背景颜色渐变,j兼容多浏览器 IE6、IE7、IE8、FF、Opera、Chorme、Safari
- IE8下兼容rgba颜色的半透明背景
- css背景颜色半透明,文字不透明(兼容ie、火狐、chrome)
- div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
- RGBA颜色与兼容性的半透明背景色实例页面
- RGBA颜色与兼容性的半透明背景色
- RGBA实现背景颜色透明