CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常

编程知识更新时间:2023-04-06 07:41:35

说明

因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因，这里不能使用伪元素。

然后我找到了 filter（滤镜)属性，他主要是运用在图片上，以实现一些特效。

然后用滤镜属性进行模糊后，发现他的效果是下图这样的：

此时文字正常显示了，图片也模糊，但是我又遇到一个问题，就是如果图片是白色的，即使模糊掉，文字显示的效果也很差，比如下图这样：

看到这个效果的时候，我瞬间傻了，既然文字是白色，我直接把图片调黑一点不就好了。

于是我用 filter（滤镜)属性中的一行代码直接把图片变暗了：

此时感觉比什么毛玻璃呀高斯模糊呀强多了。

这里主要使用的就是 filter（滤镜)属性，具体教程查阅：菜鸟教程

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" son="IE=edge">
    <meta name="viewport" son="width=device-width, initial-scale=1.0">
    <title>图片特效</title>

    <style>
        .father {
            height: 100%;
            height: 100px;
            text-align: center;
            line-height: 100%;
            position: relative;
            background-image: url('https://pic.zeyiwl/yunimg/20220217173458.png');
            background-size: 100% 100%;
        }
        
        .lvjing {
            width: 100%;
            height: 100px;
            background: inherit;
            /* 背景模糊毛玻璃效果 */
            /* -webkit-filter: blur(7px);
            -moz-filter: blur(7px);
            -ms-filter: blur(7px);
            -o-filter: blur(7px);
            filter: blur(7px);
            filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); */
            /* 变暗效果 */
            filter: brightness(50%);
        }
        
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }
    </style>

</head>


<body>

    <div class="father">

        <div class="lvjing"></div>

        <div class="son">
            <p>正常显示的文本内容</p>
        </div>

    </div>

</body>

</html>