Home > Article > Web Front-end > How to Blur a Background Image Without Affecting Content Clarity?
Creating a Background Image Blur Without Affecting Content
In this example, the goal is to blur the background image without compromising the clarity of the content (in this case, a span element).
Issue
When applying the blur effect to the background image using CSS, the content within the element is also blurred. This poses a challenge in preserving the readability of the text or other content.
Solution
To achieve the desired effect, CSS pseudo-classes can be utilized. The :before pseudo class is perfect for this scenario. Here's how to do it:
<code class="html"><div class="blur-bgimage"> <span>Main Content</span> </div></code>
<code class="css">.blur-bgimage:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: inherit; z-index: -1; filter: blur(10px); // Adjust the blur radius as desired transition: all 2s linear; }</code>
This method effectively blurs the background image while maintaining the sharpness of the content within the element.
The above is the detailed content of How to Blur a Background Image Without Affecting Content Clarity?. For more information, please follow other related articles on the PHP Chinese website!