recherche

Maison >interface Web >tutoriel CSS >Comment empêcher l'effet de flou de s'étendre aux éléments enfants en CSS ?

Comment empêcher l'effet de flou de s'étendre aux éléments enfants en CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-03 00:43:02283parcourir

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

Annuler l'effet de flou sur les éléments enfants

Vous avez un

avec une image d'arrière-plan floue, mais l'effet de flou s'étend également à ses éléments enfants. Pour contrer cela, envisagez l'approche suivante :

Créez un fichier

à l'intérieur du div parent et attribuez-lui l'image d'arrière-plan et l'effet de flou. Assurez-vous que ce div a un z-index inférieur à celui du div d'opacité.

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>

Cela créera un

qui contient l'image d'arrière-plan flou sans affecter les éléments enfants.

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!

css html this background
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer un arrière-plan décoloré sans affecter la visibilité des éléments enfants à l'aide de HTML/CSS ?Article suivant：Comment créer un arrière-plan décoloré sans affecter la visibilité des éléments enfants à l'aide de HTML/CSS ?

Articles Liés

Voir plus