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:

1. Wrap the content within a specific class (e.g., "blur-bgimage"):

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. Style the :before pseudo element within the class to mimic the background image and apply the blur effect:

<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>

3. The :before pseudo element overlays the content, inheriting the background image and applying the blur effect. The negative z-index positions it behind the content.
4. Adding the blur-bgimage class to the parent container triggers the blur effect, while removing it restores the original clarity.

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!