win7瀏覽器透明

css3的

兼容性IE6、7、8不支持IE9及以上版本和标准浏览器都支持

使用说明设置元素的所有后代元素会随着一起具有透明性一般用于调整图片或者模块的整体不透明度

!-

*{;;}body{

;()00repeat;}.demo{

padding:25px;background-color:#000000;opacity:0.2;}.demop{

color:#FFFFFF;}/style/headbodydivclassdemop背景透明文字也透明/p/div/html

css3的rgba

兼容性IE6、7、8不支持IE9及以上版本和标准浏览器都支持

使用说明设置颜色的不透明度一般用于调整background-color、color、box-shadow等的不透明度。

!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlecss3的rgba/titlestyle

*{padding:0;margin:0;}body{

padding:50px;background:url(img/bg.png)00repeat;}.demo{

padding:25px;background-color:#000000;background-color:rgba(0,0,0,0.2);}.demop{

color:#FFFFFF;}/style/headbodydivclassdemop背景透明文字也透明/p/div/html

IE专属滤镜filter:Alpha(opacityx)

使用说明IE浏览器专属问题多多本文以设置背景透明为例子如下

仅支持IE6、7、8、9在IE10版本被废除

在IE6、7中需要激活IE的haslayout属性(如*zoom:1或者*overflow:hidden)让它读懂filter:Alpha

在IE6、7、8中设置了filter:Alpha的元素父元素设置position:static(默认属性)其子元素为相对定位可让子元素不透明

!DOCTYPEhtmlhtmlheadmetacharsetutf-8titleopacity/titlestyle

*{padding:0;margin:0;}body{

padding:50px;background:url(img/bg.png)00repeat;}.demo{

padding:25px;background:#000000;filter:Alpha(opacity50);position:static;*zoom:1;}.demop{

color:#FFFFFF;position:relative;}/style/headbodydivclassdemop背景透明文字不透明/p/div

全兼容的方案

上以上3点分析可知设置透明背景文字不透明可采用的属性有rgba和IE的专属滤镜filter:Alpha其兼容性如下图所示

针对IE6、7、8浏览器我们可以采用fiter:Alpha针对标准浏览器我们采用rgba那么问题来了IE9浏览器2个属性都支持一起使用会重复降低不透明度…

那么如何只对IE6、7、8使用fiter:Alpha如何实现呢2年前写过《CSShack整理》一文最新我也做了点更新里面有IE的相关hack找到只支持IE6、7、8的方案如下

media\0screen\,screen\9{...}

ok所有问题都解决了全部代码如下

!DOCTYPEhtmlhtmlheadmetacharsetutf-8title背景透明文字不透明/titlestyle

*{padding:0;margin:0;}body{

padding:50px;background:url(img/bg.png)00repeat;}.demo{

padding:25px;background-color:rgba(0,0,0,0.5);}.demop{

color:#FFFFFF;}media\0screen\,screen\9{.demo{

background-color:#000000;filter:Alpha(opacity50);position:static;*zoom:1;}.demop{

position:relative;}}/style/headbodydivclassdemop背景透明文字不透明/p/div/html

可能很多同学会觉得很复杂为什么不直接用两个DIV放在同一个位置就行了一个不透明DIV一个文字DIV很简单的解决问题这也是好个方法但是需要写绝对定位或负margin并出现空内容的DIV而且这是这种方法在有些场景下也会显得复杂如下示例鼠标经过商标后展现展现透明的提示文案就需要控制2个DIV啦~

一点思路如果疑问欢迎大家留言交流~