Prise en compte du contraste réduit lors de la réduction de l'opacité du conteneur d'arrière-plan sombre

Question

J'essaie actuellement de corriger certains CSS. Le cahier des charges que j'ai est que l'arrière-plan doit être transparent, comme ceci:

Mais comme vous pouvez le voir, quand je mets l'arrière-plan aux textes blancs transparents semble très délavées, par rapport à :

au moment où le texte est réglé sur totalement blanc, complètement opaque dans le CSS:

.banner-content p { 
    color: rgba(255,255,255,1) !important; 
} 

Quelqu'un peut-il suggérer des astuces CSS pour augmenter le contraste apparent, étant donné que le texte est déjà aussi blanc et aussi opaque que possible ...

Answer 1

Lorsque vous définissez l'opacité d'un récipient comme celui-ci:

#container {opacity:0.5;} 

il affecte l'opacité du conteneur ET de tous ses enfants. Donc la police devient aussi opaque à 50%.

Il semble que vous voulez vraiment juste donner le récipient un fond translucide, que vous feriez comme ceci:

#container {background-color:rgba(0, 0, 0, 0.5);} 

et qui n'affectera pas le texte dans ce conteneur.