Comment conserver la netteté des éléments enfants lors de l'application d'un effet de flou à l'élément parent ?

Gardez les éléments enfants nets sous un arrière-plan flou

Lors de l'application d'un effet de flou à un élément parent, il est possible que cet effet s'étende à son éléments enfants, obscurcissant leur contenu. Pour éviter ce flou indésirable des éléments enfants, une solution existe.

Créez un nouveau div au sein de l'élément parent et attribuez-lui l'image d'arrière-plan avec l'effet de flou. Positionnez ce div derrière les éléments enfants en lui donnant un z-index inférieur à celui de la superposition. Utilisez la structure de code suivante :

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

Appliquez l'effet de flou au div de superposition tout en gardant le div d'opacité inchangé. Code CSS :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!