css 透明度问题

最新推荐文章于 2024-07-16 09:54:37 发布

12ers_梦骑士

最新推荐文章于 2024-07-16 09:54:37 发布

阅读量716

点赞数

CC 4.0 BY-SA版权

分类专栏： Html(5)/CSS(3)

本文链接：https://blog.youkuaiyun.com/u010423904/article/details/60879391

Html(5)/CSS(3) 专栏收录该内容

4 篇文章

订阅专栏

<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;

}