兼容几乎所有浏览器的CSS背景透明

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注