成都web前端培训
成都达内金融街中心

18328393564

热门课程

web前端-兼容性背景颜色半透明CSS代码

  • 时间:2016-08-31 16:44
  • 发布:达内杨老师
  • 来源:达内

兼容所有浏览器的背景颜色半透明CSS代码:

background-color: rgba(0, 0, 0, .25);

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);

注意:startColorStr和endColorStr的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。

其格式为#AARRGGBB。AA、RR、GG、BB为十六进制正整数。取值范围为00 - FF。RR指定红色值,GG指定绿色值,BB指定蓝色值,参阅#RRGGBB颜色单位。AA指定透明度。00是完全透明。FF是完全不透明。超出取值范围的值将被恢复为默认值。

2位透明度的换算方法:x=alpha*255,将计算的结果x转换成十六进制即可。

js换算16进制方法:x.toString(16)

例如:上面的0.25透明度,换算为IE的AA透明度:var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

Demo示例:

<style type="text/css">

.menu-nav-bg {

background-color: rgba(0, 0, 0, .25);

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);

}

/* css hack: rgba background with IE filter alternative: IE9 renders both! */

.menu-nav-bg:not([dummy]) {

filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false');

}

/*对于IE9,除了使用:not([dummy]) hack外,还可以使用:root,推荐使用这个

* :root选择器已经被现代主流浏览器支持了,除了IE8及以下IE浏览器

*/

:root .menu-nav-bg {

filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false');

}

</style>

<div class="menu-nav-bg">

<a href="#">我的首页</a>

|

<a href="#">我的微博</a>

</div>

思想:现代浏览器使用CSS3 RGBA实现半透明背景色,IE使用渐变滤镜filter: progid:DXImageTransform.Microsoft.Gradient实现半透明。

注意:不能使用opacity:0.5属性或是IE filter:alpha(opacity=50)半透明滤镜,因为这种半透明属性会让子元素也跟着半透明。

上一篇:HTML5+CSS3 ie8兼容
下一篇:web前端-js代码分享
选择城市和中心
贵州省

广西省

海南省