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>