Comment créer des superpositions avec des arrière-plans transparents en HTML/CSS ?

Création de superpositions avec des arrière-plans transparents en HTML/CSS

Vous souhaitez créer un effet de superposition dans lequel une boîte contextuelle apparaît au-dessus de l'arrière-plan contenu, atténuant son apparence. Cependant, l'application de l'opacité au conteneur affecte également la boîte contextuelle.

Solution

Pour obtenir l'effet souhaité, utilisez l'opacité en conjonction avec la couleur d'arrière-plan. Dans le CSS du conteneur :

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

• background-color définit la couleur transparente du conteneur.
• rgba() prend le format rgba(r, g, b, a), où r, g, b sont les valeurs rouge, vert et bleu, et a est l'opacité (0 étant entièrement transparent).

Maintenant, pour la boîte contextuelle :

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

Cette approche vous permet d'atténuer l'arrière-plan tout en conservant la visibilité de la boîte contextuelle, créant ainsi l'effet de superposition souhaité.

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!