Opacité en CSS s'appliquant à div div

Question

Question sur la propriété opacity dans CSS. J'ai un en-tête avec un titre, et j'ai une opacité de .3 qui lui est appliquée (ainsi qu'une transition, mais ce n'est pas la question). Voici un gif:

Maintenant, j'aime l'effet l'en-tête a, comme vous pouvez voir l'image derrière évidemment, mais je voudrais lui-même titre à paraître blanc, à l'opacité 1. Parce que de l'opacité appliquée à son div parent, l'en-tête, il apparaît fané comme le reste de la div. Existe-t-il un moyen de le faire? en d'autres termes, existe-t-il un moyen de "remplacer" l'opacité d'un élément parent?

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 0vh; 
 
    background-color: black; 
 
    opacity: 0; 
 
    z-index: 6; 
 
    transition: height 1s ease, opacity 1s ease; 
 
} 
 

 
#hoverable { 
 
    position: absolute; 
 
    height: 10vh; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 

 
#hoverable:hover #header { 
 
    opacity: .3; 
 
    height: 10vh; 
 
} 
 

 
#title { 
 
    margin-left: 10vw; 
 
    line-height: 10vh; 
 
    float: left; 
 
}

<div id="hoverable"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

au lieu d'opacité que vous pouvez utiliser background-color: rgba(0,0,0,0); et background-color: rgba(0,0,0,.3);

RGBA signifie alpha rouge vert bleu.

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 0vh; 
 
    background-color: rgba(0,0,0,0); 
 
    z-index: 6; 
 
    transition: height 1s ease, background 1s ease; 
 
} 
 

 
#hoverable { 
 
    position: absolute; 
 
    height: 10vh; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 

 
#hoverable:hover #header { 
 
    background-color: rgba(0, 0,0,.3); 
 
    height: 10vh; 
 
} 
 

 
#title { 
 
    margin-left: 10vw; 
 
    line-height: 10vh; 
 
    float: left; 
 
}

<div id="hoverable"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Je vois que vous en utilisant Id pour vos DIV. Peut-être que vous pourriez utiliser des classes à la place.

Les styles d'un fichier CSS sont supposés "en cascade". Donc, théoriquement, cela devrait permettre aux styles déclarés plus tard dans votre feuille de style de surcharger les styles qui sont déclarés plus tôt. Mais à cause de sélecteurs plus spécifiques (comme les identifiants), cela n'arrive pas aussi souvent que nous le souhaiterions.

Par exemple, si vous aviez le code HTML suivant:

<div id="element" class="element"> 
<!-- stuff goes here... --> 
</div> 

et CSS:

#element { 
background: blue; 
} 

body div.element { 
background: green; 
} 

Même si le sélecteur de div.element du corps apparaît après le sélecteur ID #element, et malgré la Le fait que l'élément "body" soit inclus dans le sélecteur, l'arrière-plan de l'élément sera bleu - pas vert - car le sélecteur d'ID est plus spécifique que le second sélecteur, et la cascade naturelle a été remplacée.

https://www.impressivewebs.com/difference-class-id-css/