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

你是否也在找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/