我们知道让元素半透明，要同时使用4个css，不要只写opacity:0.50，这样兼容性会很差;四种写法如下：

filter:alpha(opacity=50);  /*支持 IE 浏览器*/

-khtml-opacity: 0.5; /*webkit内核浏览器*/

opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/

当然，有时候半透明也可以用jquery来做，可能只需要一句代码就可以了。

技巧学习：

对某样式设置半透明，会影响到他的子元素，所以如果需要外层半透明，内层不透明是办不到的。透明度会相乘，例如外层透明度0.5，内层想写成不透明1，最终得到的结果是透明度0.5。

方案一：可以用position:absolute,做一上一下两个层，这样就等于分了两个层可以写不一样的样式。

方案二：用CSS的background-color: rgba(0,0,0,0.7);也可以实现背景半透明，单只是兼容IE9以上版本（CSS3是可以设置rgba的）。

html代码：

<div class="rgba">1. 这里是父元素半透明子元素不透明的效果<p>我是子元素文字</p>
</div>
<div class="opacity">2. 这里是父元素半透明子元素也半透明的效果<p>我是子元素</p>
</div>

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;}

本文作者：紫石头原创模板堂

十六年网站建设相关经验
一站式为您提供网站相关服务

欢迎扫码咨询