How to Remove Background Blur from Child Elements While Maintaining Blurred Background?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-10-25 02:20:02

Original

509 people have browsed it

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

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>

Copy after login

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>

Copy after login

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!

source：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 Cu Next article：## How to Modify CSS Rules with JavaScript Without Inline Styling?

Statement of this Website

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