CSS设置背景透明效果
设置背景透明效果有两种方法:
- 使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用。缺点:会把设置div及其子元素都显示透明。
<div class="div1">
<p>透明度测试</p>
</div>
.div1{
display: inline-block;
margin: 10px;
width: 200px;
height: 200px;
color: #FFF;
background:url(img/middle-top-bg.png) no-repeat;
/* 填充整个容器 */
background-size: 100% 100%;
opacity: 0.3;
}
结果:
- 使用rgba(red, green, blue, alpha)设置透明度,优点:只透明背景颜色。缺点:不能设置背景图片。
<div class="div2">
<p>透明度测试</p>
</div>
.div2{
display: inline-block;
margin: 10px;
width: 200px;
height: 200px;
color: #FFF;
background-color: rgba(150,250,27,0.2);
}
结果:
- 如果想使用背景图片,又想设置背景透明,但是内容不透明,可以当如设置一个div作为背景,然后使该div透明。优点:既可使用在背景图片又可以使用在背景颜色上。缺点:设计多个div,比较麻烦。
<div class="div3">
<div class="bg"></div>
<div class="container">
<p>透明度测试</p>
</div>
</div>
div3 {
display: inline-block;
margin: 10px;
width: 200px;
height: 200px;
color: #FFF;
}
.bg{
position: absolute;
background: url(img/middle-top-bg.png) no-repeat;
/* 填充整个容器 */
background-size: 100% 100%;
opacity: 0.3;
}
.container{
position: relative;
}
结果:
今天的文章CSS设置背景透明效果分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/7030.html