关于CSS中背景图片透明度问题

今天使用CSS设计一个后台页面，在插入背景图片后，设置透明度时，发现使用opacity设置透明度时，里面的文字内容也会随着背景一起变透明效果如下图于是在百度上找了很多方法，记录一下，方便以后使用1.背景毛玻璃效果通过伪类选择器before为背景添加透明效果，文字使用的仍时添加效果前的样式.demo1{width: 500px;height: 300px;line-height: 50px;text

青莳吖

9412人浏览 · 2022-03-05 10:22:38

青莳吖 · 2022-03-05 10:22:38 发布

今天使用CSS设计一个后台页面，在插入背景图片后，设置透明度时，发现使用opacity设置透明度时，里面的文字内容也会随着背景一起变透明
效果如下图在这里插入图片描述
于是在百度上找了很多方法，记录一下，方便以后使用
1.
背景毛玻璃效果
通过伪类选择器before为背景添加透明效果，文字使用的仍时添加效果前的样式

    .demo1{
        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
    }
    .demo1:before{
        background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;/*-1 可以当背景*/
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }

在这里插入图片描述

2.背景半透明效果
此方法通过在文字所在的div上面设置透明度，不改变背景的透明度
当两个盒子重叠时，就会实现下面图片的效果

.demo2-bg{
    background: url("img/htbg1.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.3);
}![在这里插入图片描述](https://img-blog.csdnimg.cn/1bf929c3b0b44f1687a4caa82e3770ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6I6z5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16)

在这里插入图片描述