码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-10-13 14:48:39      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   os   使用   ar   sp   数据   

你是否也在找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="#" class="alpha">黑色透明背景</a> 
<a href="#" 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,另外谷歌起初有点问题后来更新了下现在也解决了,如果有什么问题还望不吝赐教!

话题相关文章

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

标签:style   http   color   io   os   使用   ar   sp   数据   

原文地址:http://www.cnblogs.com/lschenblog/p/4022059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!