【转】CSS设置透明背景

全透明代码:{background:transparent}

半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!important;width:100%}

如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法:

HTML代码:

<div class="alpha1">

<divclass="ap2">

<p>背景为红色(#FF0000),透明度20%。</p>

</div>

</div>

CSS代码:

.alpha1{

width:300px;

height:200px;

background-color:#FF0000;

filter:Alpha(Opacity=30);

}

.ap2{

position:relative;

}

这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。

如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。

改下页面结构与CSS样式:

HTML代码:

<div class="alpha1">

<divclass="ap2">

<p>背景为红色(#FF0000),透明度20%。</p>

</div>

<!--[ifIE]><![if!IE]><![endif]--><divclass="alpha2"></div><!--[ifIE]><![endif]><![endif]-->

</div>

CSS代码:

.alpha1,.alpha2{

width:100%;

height:auto;

min-height:250px;/*必需*/

_height:250px;/*必需*/

overflow:hidden;

background-color:#FF0000;/*背景色*/

}

.alpha1{

filter:alpha(opacity=20);/*IE透明度20%*/

}

.alpha2{

background-color:#FFFFFF;

-moz-opacity:0.8;/*Moz+FF透明度20%*/

opacity:0.8;/*支持CSS3的浏览器(FF1.5也支持)透明度20%*/

}

.ap2{

position:absolute;

}

相关推荐