在 CSS 中模糊背景图像而不影响内容
在 CSS 中,你可能会遇到这样的情况:想要模糊某个对象的背景图像元素而不影响其中的内容。以下是实现此目的的方法:
解决方案涉及创建一个继承父元素背景图像的伪元素 (:before)。然后将该伪元素绝对定位并给予模糊滤镜。通过将其 z-index 设置为 -1,它会出现在内容后面。
要实现此目的,请应用以下 CSS:
<code class="css">.blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: ""; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit-filter: blur(10px); -o-filter : blur(10px); transition : all 2s linear; -moz-transition : all 2s linear; -webkit-transition: all 2s linear; -o-transition : all 2s linear; }</code>
然后您可以使用 JavaScript 来切换类 (例如,“blur-bgimage”)将此 CSS 应用于所需的元素,根据需要模糊或取消模糊背景图像。
以上是如何在保持内容清晰的同时模糊 CSS 元素的背景图像?的详细内容。更多信息请关注PHP中文网其他相关文章!