码迷,mamicode.com
首页 > Web开发 > 详细

使用RGBa和Filter实现不影响子元素的CSS透明背景

时间:2016-10-11 10:36:45      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

点击查看原文

问题

如果我们想要一个元素拥有半透明的背景,我们有两个选择:

使用CSS和 opacity 做一张 24-bit PNG 背景图片

在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法;二是opacity不仅使目标元素的背 景变得半透明,而且使它所有的子元素的背景也变成了半透明。这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这 样的效果。可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段躲开这个问题,归根结底,乱就一个字。

使用PNG图片也有问题,除了不必要的HTTP请求之外,图片体积再小也比两行CSS代码大-特别是在IE里面,为了避免24-bitPNG图片严重的内存泄漏问题,这张图还必须额外大一点。

解决方案!

综上种种,我愿意很高兴的提供一种替代方案:RGBa颜色。这个方案的优点在于你可以设定正常的RGB颜色值,再加上你想要的透明度,OK,这就得到了半透明的背景色。用CSS写出来,再加上对不支持rgba浏览器的优雅降级,代码如下:

.alpha60 { /* Fallback for web browsers that doesn‘t support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); } 

半透明效果仅仅应用于背景-确实很妙,是不是?! :-)

提示

令人震惊的是,所有的IE(译者注:作者写这篇博客时还没有IE9,IE9在标准渲染模式下是支持RGBa的)都不支持RGBa色彩。幸运的 是,2000年疯狂的微软公司在IE中实现了许多过滤器。其中有一个倾斜度过滤器,我们需要做的就是把它的起始颜色和结束颜色定义成同样的值。“OK,可 我们要的是透明效果呀?”我知道你会这么想。答案是,我们使用16进制颜色值的一部分来声明起始颜色和结束颜色。使用css倾斜度过滤器达到同样效果的代 码如下:

.alpha60 { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); } 

看到没。它的颜色值使用8位16进制值声明,其中第一第二位是16进制的alpha值 ,后面两位是R,再后面是G,再后面是B。和RGBa不同的是,它使用16进制数而不是0-255的颜色值。那我们怎样才能得到alpha0.6级别的16进制值?

我们现在需要做点算术题。我们需要alpha0.6级,将它乘上255--再把结果转换成16进制。一个简单方法是使用Google搜索功能,只需 要在关键词那儿写上 0.6 * 255 in hex 就可以了。不幸的是Google的计算器好象只支持整数,象 0.3 * 255 in hex这样的关键字根本得不到结果。

好在,还有一个也不算慢的手段,我们可以利用JavaScript。打开Firebug,然后在JavaScript控制台输入:

// Replace 0.6 with your desired alpha level Math.floor(0.6 * 255).toString(16); 

我们得到结果 99,也就是alpha0.6级别对应的16进制数。这就是倾斜度过滤器所需要的起始和结束值。

总结

综合以上技术,我们写一份能在生产环境中使用的CSS:

.alpha60 { /* Fallback for web browsers that doesn‘t support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } 

注意!作为对本文的补充,你应该使用更可取的条件注释或类似方法为IE浏览器声明透明背景!

浏览器支持

以下浏览器支持 RGBa:

Firefox 3+ Safari 2+ Opera 10 

从IE5.5开始,所有的IE浏览器都支持过滤器。

这意味着,我们实际上已经支持所有的浏览器!

使用RGBa和Filter实现不影响子元素的CSS透明背景

标签:

原文地址:http://www.cnblogs.com/gxsyj/p/5948002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!