【转】CSS设立透明背景
日期：2014-05-17 浏览次数：20648 次
【转】CSS设置透明背景
全透明代码:{background:transparent}
半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
如何用CSS实现背景半透明效果？做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现，我们有更简单的做法：
HTML代码：
CSS代码：
这样基本就可以实现啦，也不用担心定位和自适应问题，最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式：
HTML代码：
CSS代码：
HTML代码：
<div class="alpha1">
? <div class="ap2">
? ? ? <p>背景为红色(#FF0000)，透明度20%。</p>
? </div>
</div>
? <div class="ap2">
? ? ? <p>背景为红色(#FF0000)，透明度20%。</p>
? </div>
</div>
CSS代码：
.alpha1{
? ? width:300px;
? ? height:200px;
? ? background-color:#FF0000;
? ? filter: Alpha(Opacity=30);
}
.ap2{
? ? position:relative;
}
? ? width:300px;
? ? height:200px;
? ? background-color:#FF0000;
? ? filter: Alpha(Opacity=30);
}
.ap2{
? ? position:relative;
}
这样基本就可以实现啦，也不用担心定位和自适应问题，最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式：
HTML代码：
<div class="alpha1">
? <div class="ap2">
? ? ? <p>背景为红色(#FF0000)，透明度20%。</p>
? </div>
? <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>
? <div class="ap2">
? ? ? <p>背景为红色(#FF0000)，透明度20%。</p>
? </div>
? <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![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的浏览器（FF 1.5也支持）透明度20%*/
}
.ap2{
? ? position:absolute;
}
? ? 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的浏览器（FF 1.5也支持）透明度20%*/
}
.ap2{
? ? position:absolute;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
