Maison >interface Web >tutoriel CSS >Comment créer un arrière-plan décoloré sans affecter la visibilité des éléments enfants à l'aide de HTML/CSS ?

Comment créer un arrière-plan décoloré sans affecter la visibilité des éléments enfants à l'aide de HTML/CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-03 00:39:02691parcourir

How to Create a Fading Background Without Affecting Child Element Visibility Using HTML/CSS?

Manipulation de l'opacité sans affecter les éléments enfants à l'aide de HTML/CSS

Problème :

Implémentation d'un effet de fondu pour l'arrière-plan pendant garder un élément enfant visible peut être difficile en utilisant uniquement l'opacité. Ceci se produit lorsque vous tentez de créer une boîte contextuelle qui se met en évidence en atténuant le contenu sous-jacent.

Solution :

Pour obtenir l'effet souhaité, combinez l'opacité avec la couleur d'arrière-plan. comme suit :

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}</code>

En définissant la propriété background avec une valeur rgba, vous spécifiez l'opacité du conteneur, qui représente le contenu derrière la boîte contextuelle, tout en préservant la visibilité de l'élément #box. Les valeurs RVB représentent la couleur, tandis que la valeur a indique le niveau de transparence.

Pour appliquer cette approche, implémentez le code CSS fourni et incluez le code HTML suivant :

<code class="html"><div id="container">
    container text
    <div id="box">
        box text
    </div>
</div></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!

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