时间:2021-07-01 10:21:17 帮助过:14人阅读
我们平时调整的不透明度如图所示:
实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:
兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持,如图所示:
使用说明:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度
背景透明,文字不透明 背景透明,文字也透明
使用opacity后整个模块都透明了,展现如下:
那么使用opacity实现《背景透明,文字不透明》是不可取的。
兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持
使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。
背景透明,文字不透明 背景透明,文字不透明
在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,展现如下:
这种写法是可以实现背景透明,文字不透明的,只是IE8及低版本不支持。
使用说明:IE浏览器专属,问题多多,本文以设置背景透明为例子,如下:
背景透明,文字不透明 背景透明,文字不透明
上以上3点分析可知,设置透明背景文字不透明,可采用的属性有rgba和IE的专属滤镜filter:Alpha
针对IE6、7、8浏览器,我们可以采用fiter:Alpha,针对标准浏览器我们采用rgba,那么问题来了,IE9浏览器2个属性都支持,一起使用会重复降低不透明度...
那么,如何只对IE6、7、8使用fiter:Alpha如何实现呢,找到只支持IE 6、7、8的方案,如下:
/* 只支持IE6、7、8 */@media \0screen\,screen\9 {...}
所以兼容所以浏览器的代码如下:
背景透明,文字不透明 背景透明,文字不透明
有的网友觉得这样做没有必要,我觉得也没有必要,这只是实现背景透明,文字不透明的一种兼容方式而已,还有其他的解决办法。
比如:两个DIV放在同一个位置就行了,一个透明DIV,一个文字DIV,也能实现,就是需要定位。
如果要兼容低版本浏览器,我一般还是切透明图片,放在背景里面,这样既不用写这么多样式,也不用需要定位就能解决。(如果背景不是单一的透明颜色,只有切成图片才行)。