首页 > 代码库 > CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器

CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器

2024-07-26 22:23:59   221人阅读

你是否也在找ie透明背景的css？很多时候我们网页可能会用到透明的效果，比如一般半透明的白色背景，可能在ie7以上版本没问题，但是现在ie6和ie7的用户非常多，我们不得不考虑，可能出现这种问题时，大家可能更多是用一张半透明图片处理，当然我们的原则是能用代码解决的坚决不用图片，其中缘由就不细细道来。请直接看效果。子曰去哪是使用Windows Virtual PC中Windows XP Mode ie6测试所以可以保证原滋原味支持ie6这个奇葩！

纯css透明背景 效果演示

黑色透明背景白色透明背景

以上演示非效果图截图，为css透明背景纯代码演示

纯css透明背景 演示代码html+css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>支持主浏览器及ie6的不影响文字透明背景</title><style type="text/css">.alpha-demo { width:384px; height:282px; position:relative; background-color:#69F; background-image:url(http://placekitten.com/389/282); margin:0px auto;}.alpha-demo a {    width: 190px;    height: 50px;    line-height: 50px;    padding-top:230px;    position: absolute;    display: block;    text-align: center;    text-decoration: none;}.alpha {background-color:rgba(0,0,0,0.5)!important; background:#000; filter:alpha(opacity=50); *background:#000; *filter:alpha(opacity=50); /*黑色透明背景结束*/ color:#FFF; bottom:0px; right:0px;border:1px solid #000;}#alpha {background-color:rgba(255,255,255,0.5)!important; background:#fff; filter:alpha(opacity=50);   *background:#fff; *filter:alpha(opacity=50);  /*白色透明背景结束*/ color:#000; top:0px; left:0px;border:1px solid #fff;}</style></head><body><div class="alpha-demo"><a href=http://www.mamicode.com/"#" class="alpha">黑色透明背景</a> <a href=http://www.mamicode.com/"#" id="alpha">白色透明背景</a> </div></body></html>

CSS透明背景 不透明文字css代码

.bg {background-color:rgba(0,0,0,0.5)!important; background:#000; filter:alpha(opacity=50); *background:#000; *filter:alpha(opacity=50);}

代码说明：rgba的意思就是前面前面“,”前属性是颜色rgb值，然后a就是alpha不透明值0-1比如0.5就是不透明度50%，值越高就越不透明。然后的是对ie6、ie7等浏览器做的兼容优化颜色使用的是十六进制然后不透明度就是0-100。。。

这段CSS透明背景代码兼容性

兼容Internet Explorer家族，上至ie11，下至ie6。可以完美满足前端体验。

支持谷歌浏览器（Chrome）、支持火狐浏览器（Firefox）、苹果浏览器（Safari）、欧朋浏览器（Opera）
还有就是傲游、搜狗、猎豹、奇虎360安全浏览器、百度浏览器、淘宝浏览器、hao123浏览器、QQ浏览器这些奇葩浏览器都支持！
写在最后，刚刚用安卓默认浏览器测试也没问题，然后QQ浏览器手机版和UC浏览器都通吃！

更新了下，在win7的ie9下 开发者工具中测试了ie7、ie8、ie9，另外谷歌起初有点问题后来更新了下现在也解决了，如果有什么问题还望不吝赐教！

话题相关文章

    • dropbox离线安装包下载
    • 超SB装机法，史上最简单的装WIN7系统方法
    • 亲测可快速同步电脑/手机时间的国内NTP Server服务器地址
    • 已经开通而且有数据，但点击详情就提示：该站点尚未开通腾讯分析服务
    • Axure7.0注册码 Axure7序列号Axure7密钥 Axure7.0License key

CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器


联系
我们