How to Keep Child Elements Sharp When Applying a Blur Effect to the Parent Element?

Keep Child Elements Sharp Under Blurred Background

When applying a blur effect to a parent element, it's possible that this effect will extend to its child elements, obscuring their content. To prevent this undesired blurring of child elements, a solution exists.

Create a new div within the parent element and assign it the background image with the blur effect. Position this div behind the child elements by giving it a lower z-index than the overlay. Use the following code 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">
            <!-- Information content -->
        </div>
    </div>
</div></code>

Apply the blur effect to the overlay div while keeping the opacity div unaffected. CSS code:

<code class="css">.content .overlay {
    background-image: url('images/zwemmen.png');
    -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);
    z-index: 10;
}</code>

The above is the detailed content of How to Keep Child Elements Sharp When Applying a Blur Effect to the Parent Element?. For more information, please follow other related articles on the PHP Chinese website!