How to Prevent Blur Effect from Extending to Child Elements in CSS?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-11-03 00:43:02

Original

270 people have browsed it

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

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>

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

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!

source：php.cn

Previous article：How to Create a Fading Background Without Affecting Child Element Visibility Using HTML/CSS? Next article：How to Span Rows and Columns with CSS Grid?

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