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
Libérer: 2024-11-03 00:39:02
original
643 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal