Comment obtenir une opacité sélective dans un conteneur sans affecter les éléments enfants ?

Obtenir une opacité sélective en HTML/CSS

Lors de la création d'éléments visuels sur une page Web, le contrôle de l'opacité est vital. Cependant, parvenir à l’opacité sans affecter les éléments enfants peut s’avérer difficile. Cette question explore une technique pour appliquer l'opacité à un conteneur sans compromettre la visibilité de son contenu.

L'effet souhaité est une boîte contextuelle positionnée sur le contenu de la page Web, avec le contenu d'arrière-plan partiellement visible en réduisant son opacité. L'interrogateur a tenté d'utiliser l'opacité sur le conteneur, mais l'opacité a également affecté l'élément enfant, ce qui a entraîné une réduction de l'opacité.

Pour surmonter ce problème, vous pouvez utiliser une combinaison d'opacité et de couleur d'arrière-plan. En définissant la couleur d'arrière-plan du conteneur sur une valeur rgba avec un composant d'opacité (par exemple, rgba(56,255,255,0.1)), vous pouvez réduire son opacité tout en préservant la visibilité de l'élément enfant. Cela vous permet de créer l'effet souhaité d'une boîte contextuelle avec un arrière-plan partiellement opaque.

<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);
}

<div id="container">
    containter 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!