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

你是否也在找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,另外谷歌起初有点问题后来更新了下现在也解决了,如果有什么问题还望不吝赐教!

转载请注明转自:一极乐https://yijile.com/log/334.html


话题相关文章

话题标签

CSSIE浏览器IE6placekitten.com乐知道

一极乐 为乐趣而生

《CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器》  发表时间:  最后更新时间:

谁来过

寒叶邀请你对本文不足说出你的看法!

有 6 条评论

  1. 寒叶 寒叶

    谢谢提出,稍后完善
    如果ie9+可以使用 css3
    http://yijile.com/log/163.html

  2. roy roy

    ie9上看“黑色透明背景”几个字的颜色变淡了,而且ie9下的白色透明背景读取了两次0.5,几乎就等于透明100%了。。

  3. 子曰去哪 子曰去哪

    @nornor
    现在又测试了下,应该没有问题了

  4. 子曰去哪 子曰去哪

    上次调着调着 又。。。好像现在ie7可以哦

  5. nornor nornor

    ie 7 8都无效...

  6. 无线网 无线网

    代码挺好用 这个感情好~~

添加新评论

captcha




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP