CSS实现背景图片透明和文字不透明效果
直接上示例代码:
<style>.demo2-bg{
background: url(https://pdbn.top/uploads/2019/02/8fa5dcfcly1fzk7qz5rx4j20fd09mq9e.jpg) no-repeat;
background-size: cover;
width: 500px;
height: 300px;
position: relative;
}
.demo2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
background:rgba(255,255,255,0.8);
}
</style>
<div class="demo2-bg">
<div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.8)</div>
</div>
