使用RGBa和Filter实现不影响子元素的CSS透明背景
点击查看原文
问题
如果我们想要一个元素拥有半透明的背景,我们有两个选择:
使用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浏览器都支持过滤器。
这意味着,我们实际上已经支持所有的浏览器!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析