win7浏览器透明
番茄系统家园 · 2021-08-17 04:00:17
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;/*IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖*/background-color:rgba(0,0,0,0.2);/*IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂但解析为透明*/}.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);/*只支持IE6、7、8、9*/position:static;/*IE6、7、8只能设置position:static(默认属性)否则会导致子元素继承Alpha值*/*zoom:1;/*激活IE6、7的haslayout属性让它读懂Alpha*/}.demop{
color:#FFFFFF;position:relative;/*设置子元素为相对定位可让子元素不继承Alpha值保证字体颜色不透明*/}/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的方案如下
/*只支持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);/*IE9win7浏览器透明、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂*/}.demop{
color:#FFFFFF;}media\0screen\,screen\9{/*只支持IE6、7、8*/.demo{
background-color:#000000;filter:Alpha(opacity50);position:static;/*IE6、7、8只能设置position:static(默认属性)否则会导致子元素继承Alpha值*/*zoom:1;/*激活IE6、7的haslayout属性让它读懂Alpha*/}.demop{
position:relative;/*设置子元素为相对定位可让子元素不继承Alpha值*/}}/style/headbodydivclassdemop背景透明文字不透明/p/div/html
可能很多同学会觉得很复杂为什么不直接用两个DIV放在同一个位置就行了一个不透明DIV一个文字DIV很简单的解决问题这也是好个方法但是需要写绝对定位或负margin并出现空内容的DIV而且这是这种方法在有些场景下也会显得复杂如下示例鼠标经过商标后展现展现透明的提示文案就需要控制2个DIV啦~
