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

经验笔记
浏览 loading

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

纯css透明背景 效果演示

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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="#" class="alpha">黑色透明背景</a> 
<a href="#" id="alpha">白色透明背景</a> 
</div>
</body>
</html>

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

1
.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，另外谷歌起初有点问题后来更新了下现在也解决了，如果有什么问题还望不吝赐教！

Relay Tips: 一极乐（ https://yijile.com/log/334/ ）