Home >Web Front-end >CSS Tutorial >How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

Susan SarandonOriginal: 2024-10-25 02:20:02570browse

Remove Background Blur from Child Elements

You have a

with a background image applied with a blur effect. However, all the child elements are also affected by this blur, which is undesirable. This article provides a solution to resolve this issue, allowing you to maintain the blur effect on the background image while preserving the crispness of the child elements.

Solution: Create an Overlay Element

To achieve this, you can create a separate

within the parent element and apply the background image and blur effect to this new element. Then, position this element behind the existing child elements using z-index values.

Here's the modified HTML structure:

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div></code>

CSS:

<code class="css">.content {
    float: left;
    width: 100%;
}

.content .overlay {
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index: 0;
}

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}</code>

In this setup, the .overlay element has the blur effect applied, while the .opacity element blocks this effect from reaching the child elements, resulting in sharp and focused child elements over a blurred background.

The above is the detailed content of How to Remove Background Blur from Child Elements While Maintaining Blurred Background?. For more information, please follow other related articles on the PHP Chinese website!

css html while using this position background issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Here are a few question-based article titles that fit your content, focusing on the practical troubleshooting aspect: * **Why Isn\'t My Custom Cursor Showing Up in Firefox and Chrome?** * **Custom CuNext article：Here are a few question-based article titles that fit your content, focusing on the practical troubleshooting aspect: * **Why Isn\'t My Custom Cursor Showing Up in Firefox and Chrome?** * **Custom Cu

See more

How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

Related articles