说明
因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因，这里不能使用伪元素。
然后我找到了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('/yunimg/2027173458.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%;属性。
