How to Blur a Background Image in CSS Without Blurring the Content?

CSS Blur on Background Image While Preserving Content Clarity

In an attempt to blur a background image in a CSS setting, it's common to encounter the issue where the content (text or other elements) also becomes blurred. This is where the concept of z-index and pseudo elements come into play.

To blur the background image without affecting the content, the following approach can be employed:

1. Creating a Container for the Background: Enclose the background image within a div or other container and assign it a class, such as "blur-bgimage."
2. Introducing a Pseudo Element: Within the "blur-bgimage" class, add a pseudo class like :before. This creates a layer behind the container that inherits the background image.
3. Blurring the Background: Apply the blur effect to the pseudo element using CSS filters. This will blur the inherited background image without impacting the content.
4. Overlaying the Content: Place the content within the "blur-bgimage" container, ensuring it has a higher z-index (e.g., z-index: 1) than the blurred background (z-index: 0).

Below is an example code:

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

By implementing this approach, you can effectively blur the background image while preserving the clarity of your content, allowing for visually appealing website designs.

The above is the detailed content of How to Blur a Background Image in CSS Without Blurring the Content?. For more information, please follow other related articles on the PHP Chinese website!