说明
因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因，这里不能使用伪元素。
然后我找到了 filter（滤镜)属性，他主要是运用在图片上，以实现一些特效。
然后用滤镜属性进行模糊后，发现他的效果是下图这样的：
此时文字正常显示了，图片也模糊，但是我又遇到一个问题，就是如果图片是白色的，即使模糊掉，文字显示的效果也很差，比如下图这样：
看到这个效果的时候，我瞬间傻了，既然文字是白色，我直接把图片调黑一点不就好了。
于是我用 filter（滤镜)属性中的一行代码直接把图片变暗了：
此时感觉比什么毛玻璃呀高斯模糊呀强多了。
这里主要使用的就是 filter（滤镜)属性，具体教程查阅：菜鸟教程
代码
代码语言：javascript复制<!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.cn/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>注意
background: inherit;这个必须有，是用来选择要操作的背景图。
filter和原背景图(父)盒子的宽高必须保持相同，否则会乱。
背景图正常显示请添加：background-size: 100% 100%;属性。
