Comment maintenir l'opacité des éléments enfants lors de la définition de l'opacité du conteneur en HTML/CSS ?

Maintenir l'opacité des éléments enfants en HTML/CSS

Votre objectif est de créer une boîte contextuelle qui apparaît en haut de la page, avec le contenu d'arrière-plan estompé pour le mettre en surbrillance . Cependant, vous avez rencontré un problème où la définition de l'opacité du conteneur sur 0,3 rend les deux divs translucides.

Solution : utiliser la couleur d'arrière-plan avec l'opacité

Pour obtenir l'effet souhaité, utilisez l'opacité dans en conjonction avec la couleur de fond. Considérez le code suivant :

<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>

Dans ce code, une approche légèrement différente est adoptée :

• L'élément #container est défini pour avoir une bordure dorée et un semi-transparent arrière-plan avec une opacité spécifiée.
• L'élément #box, qui représente la boîte contextuelle, reçoit une bordure argentée et un arrière-plan semi-transparent avec une opacité spécifiée différente.

Par en utilisant la couleur d'arrière-plan avec opacité, vous pouvez contrôler la transparence du conteneur tout en conservant l'opacité de l'élément enfant. Cela permet à la boîte contextuelle de se démarquer sur l'arrière-plan délavé.

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!