admin管理员组文章数量:1794759
CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
说明
因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因，这里不能使用伪元素。
然后我找到了 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('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> 注意background: inherit;这个必须有，是用来选择要操作的背景图。
filter和原背景图(父)盒子的宽高必须保持相同，否则会乱。
背景图正常显示请添加：background-size: 100% 100%;属性。
版权声明：本文标题：CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969415a123679.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论