Comment créer un arrière-plan décoloré sans affecter la visibilité des éléments enfants à l'aide de 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!