写在前面的话:
~
原文链接: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; }
以上 CSS 仅IE支持
兼容FF、OP怎么写呢?如下:
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; }
时间: 2024-11-05 19:45:45