css实现背景图片透明内容不透明

实现背景图片透明而内容不透明有很多种方法，但是我最常用的是用before伪元素。大家肯定都知道透明是使用opacity，但opacity会让背景及其子元素的所有内容都透明，比如：<style>* {margin: 0;padding: 0;}.box1 {width: 500px;height: 340px;

Deca~

10418人浏览 · 2022-04-03 16:02:44

Deca~ · 2022-04-03 16:02:44 发布

实现背景图片透明而内容不透明有很多种方法，但是我最常用的是用before伪元素。

大家肯定都知道透明是使用opacity，但opacity会让背景及其子元素的所有内容都透明，比如：

      <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 500px;
            height: 340px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -170px;
            opacity: 0.5;
            background-image: url("./StudyCode/HTML5+CSS3/图片/哈利波特7.png");
        }
        .box2{
            width: 200px;
            height: 150px;
            font-size: 40px;
            font-weight: 500;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -75px;
            text-align: center;
            line-height: 150px;
            letter-spacing: 10px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">哈利波特</div>
    </div>
</body>

</html>

得到的结果如下：可以看见其中的字体也被透明了

在上面的css中加上如下代码即可解决：记得把上面的.box1的最后两行代码删掉，不然会覆盖before的内容。

        .box1::before{
            width: 500px;
            height: 340px;
            content: "";
            /* 一定要加定位，这样z-index才起作用 */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -170px;
            z-index: -1;
            opacity: 0.5;
            background-image: url("./StudyCode/HTML5+CSS3/图片/哈利波特7.png");
        }

得到结果：