css让元素半透明的最兼容写法

2024-10-15 13:47:06

1、我们知道让元素半透明，要同时使用4个css，不要只写opacity:0.50，这样兼容性会很差;四种写法如下：filter:alpha(opacity=50); /*支持 IE 浏览器*/-moz-opacity:0.50; /*支持 FireFox 浏览器*/-khtml-opacity: 0.5;/*webkit内核浏览器*/opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/当然，有时候半透明也可以用jquery来做，可能只需要一句代码就可以了。

2、技巧学习：对某样式设置半透明，会影响到他的子元素，所以如果需要外层半透明，内层不透明是办不到的。透明度会相乘，例如外层透明度0.5，内层想写成不透明1，最终得到的结果是透明度0.5。正确思路：可以用position:absolute,做一上一下两个层。另外，用CSS的background-color: rgba(0,0,0,0.7);也可以实现背景半透明，单只是兼容IE9以上版本（CSS3是可以设置rgba的）。

3、html代码：<body> <div class="rgba"> 1. 这里是父元素半透明子元素不透明的效果 <p>我是子元素文字</a> </div> <div class="opacity"> 2. 这里是父元素半透明子元素也半透明的效果 <p>我是子元素</a> </div></body>

4、CSS代码：body{background-color: red;}div{width: 300px;height: 200px;color: #fff;}div.rgba{background-color: rgba(0,0,0,0.7);}div.opacity{background-color: #000;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.7;opacity: 0.7;margin-top: 20px;}这样就等于分了两个层