Home > Article > Web Front-end > How to Prevent Blur Effect from Extending to Child Elements in CSS?

How to Prevent Blur Effect from Extending to Child Elements in CSS?

Susan SarandonOriginal: 2024-11-03 00:43:02192browse

Cancel Blur Effect on Child Elements

You have a

with a blurred background image, but the blur effect also extends to its child elements. To counteract this, consider the following approach:

Create a separate

inside the parent div and assign the background image and blur effect to it. Ensure that this div has a lower z-index than the opacity div.

HTML:

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

This will create a

that contains the blurred background image without affecting the child elements.

The above is the detailed content of How to Prevent Blur Effect from Extending to Child Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!

css html this background

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：How to Create a Fading Background Without Affecting Child Element Visibility Using HTML/CSS?Next article：How to Create a Fading Background Without Affecting Child Element Visibility Using HTML/CSS?

See more

How to Prevent Blur Effect from Extending to Child Elements in CSS?

Related articles