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

话题相关文章

时间: 2024-10-09 03:43:01

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

拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)</title> &l

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背 景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这 样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

CSS 背景图拉伸 兼容 FF Chrome IE 等主流浏览器(转)

注:本文欢迎转载,以下为本人亲测,转载请注明:http://blog.csdn.net/wqmain/article/details/8844286 相信各位一定碰到过这种情况,按钮作为DIV的背景图来显示,实际上有多个这样的按钮,而且DIV中的文字,也就是按钮上要显示的文字内容和个数都 不定,这种情况下就需要用背景图片拉伸效果来处理了,只需做一个按钮图片,作为DIV的背景图时随着DIV的宽度或高度自适应就OK了.网上也找过,但不 兼容IE或有bug,下面贴出本人亲测代码,兼容主流浏览器,包括F

css设置背景半透明,文字不半透明

现在很多网站都喜欢用半透明的效果显示内容,让人看起来很舒服,不像实色背景看起来那么厚重,但是我们写效果的时候都是希望半透明只作用在背景上,所以经过试验,总结了几种让背景半透明,而文字不半透明的效果,欢迎指点和补充~~ 方法一: 以前经常用的,半透明层和文字层分离,用一个单独的标签来显示半透明层,这样文字层和半透明层互不影响,但是不好的就是增加了标签 <style type="text/css"> .opacity01 div, .opacity01 span{ width:

CSS透明属性详解代码_CSS/HTML

本文介绍一下关于CSS透明属性详解及背景透明继承解决办法hack,如果你在使用css透明背景之类的此文章可帮你解决许多不兼容问题 透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性

javascript创建css、js,onload触发callback兼容主流浏览器的实现

http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.css后是否触发onload事件做了个测试.当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他们并不是万能的.加载js文件onload触发callback不算大问题.css比较特殊,因为Webkeit/FF下加载css不会触发onload事件.所以研究了一晚上

CSS实现背景透明而背景上的文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV是黑色

css实现背景透明,文字不透明,兼容所有浏览器

实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8) IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80) css3的opacity 兼容性:IE6.7.8不支

CSS实现背景透明而背景上的文字不透明完美解决

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透 明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就 需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV