CSS实现背景透明半透明效果的⽅法
全透明代码:{background:transparent}
半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
其他的还有不少⽂章，有个不错，如何⽤CSS实现背景半透明效果？
内容详细如下：
llf535 龙⾏天下精彩内容等着你
引⽤
如何⽤CSS实现背景半透明效果？做过活动页⾯的同学可能会遇到要做背景半透明的效果，我们⼀般的做法是⽤两个层，⼀个⽤于放⽂字，另⼀个⽤于做透明背景，因为透明滤镜的效果会影响到⾥⾯的内容。不过如果你只需求在IE下实现，我们有更简单的做法：
css特效文字HTML代码：
<div class="alpha1">
<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;
}
  这样基本就可以实现啦，也不⽤担⼼定位和⾃适应问题，最⼤的问题是仅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>
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。