以前喜欢用PNG图片做背景透明，在IE6下再加个htc才能做到全兼容，每次要改透明度就得重新做一张PNG，比较麻烦。这里找到一个比较简便的方法，不用加载图片，缺点是CSS长了点（要满足兼容性，长也是正常的），不过能节约时间。

原理是在旧版IE中用滤镜，在IE9以后支持CSS3的浏览器中用RGBA色，包含了透明度值，CSS代码如下

1
2
3
4
5
6

#id { 
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#FF000000', endColorstr='#FF000000');
 }
:root #id { 
	filter:none; background-color:rgba(0,0,0,1); 
}

注意滤镜中的颜色值#FF000000，
前两位为16进制的透明度，50%透明就改成7F；后6位是常用的16进制RGB颜色。

这里还用到一个CSS hack，:root可以做IE9以前的hack。
一个生成以上代码的工具，收藏一下：http://linxz.de/css_tool/hex_color.html

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/24.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。