<style>
.main{
clear:right;
margin:20% auto;
overflow:hidden;
width:525px;
}
.main div{
color:red;
float:left;
display:inline-block;
width:120px;
height:120px;
text-align:center;
}
/*使用opacity透明属性的显示效果*/
.div1{background-color:rgb(0,0,0);
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';margin-right:15px;
}
.div1 p{
position:relative;
}
/*使用rgba色显示的效果*/
.div2{
background:rgba(0,0,0,.5);
margin-right:15px;
}
.div3{
background:#000;
background:rgba(0,0,0,.5);
filter:alpha(opacity=50);
-ms-filter:'progid.DXImageTransform.Microsoft.Alpha(opacity=50)';
margin-right:15px;
}
.div3 p{
position:relative;
}
.div4{
position:relative;
}
.div4-bg{
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
.div4 p{
position:absolute;
left:0;
top:0;
}
</style>
<div class="main">
<div class="div1">
<p>背景色为rgb的opacity效果</p>
</div>
<div class="div2">
<p>背景色为rgba的透明效果</p>
</div>
<div class="div3">
<p>设置opcity且背景色为rgba的透明效果</p>
</div>
<div class="div4">
<div class="div4-bg"></div>
<p>独立同级关系处理opcity透明度问题</p>
</div>
</div>
处理兼容性问题
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
转载请注明原文地址: https://ju.6miu.com/read-5486.html
