[Résolu] Opacity sur background-image

Bonjour,
J'ai un div dont le background-image a une opacity :0.4
Cette div contient une autre div dont le background est une couleur en rgba pour éviter la filiation de l'opacité :
background: rgba(35,51,11,1);
J'ai toujours l'opacité à 0.4
Je loupe quelque chose mais quoi ?
Merci

Salut,

Il nous faudrait un bout de code pour être sur. Mais quand tu dis "un div dont le background-image a une opacity :0.4" pour moi l'opacity est sur la div et non sur le background-image, donc ses enfants auront également l'opacity a 0.4. Le background de l'élément fils aura bien une valeur non-transparentes mais comme il est dans un élément transparent ca ne se rééquilibre pas comme ca...

Si tu veux seulement le fond du parent en transparent en non les enfants il faut que l'opacity soit sur le fond et non l'élément : https://jsfiddle.net/9rqzfjcb/1/

Si c'est une image et non une couleur c'est un poil plus compliqué mais si l'opacity ne varie pas, autant mettre directement une image semi-transparente non ?

Bonne journée

Bonsoir,
En effet avec un code plus précis, c'est mieux
<!-- div englobante class 1900 -->

<div class="1900" style="background-image: url('squelettes/images/aof.jpg'); background-repeat:no-repeat;opacity:0.4;">

<!-- la div class ="texte_sommaire" ci-dessous comprend 2 "sous-div" -->

<div class="texte_sommaire" style=" border: 0.5px solid #604A7F; max-width: 1024px; border-radius: 5px;margin-bottom:0;background-color: rgba(35,51,11,1);">

MON TITRE ICI

<!-- 1ere sous-div -->

<div style="padding : 1.5rem; width: 50%; font-family: Nuninto; ">

MON TEXTE ICI
</div> <!-- FIN 1ere sous-div -->

<!-- 2eme sous-div -->

<div style="padding : 1.5rem; width: 50%; font-family: Nuninto; ">

MON TEXTE ICI
</div> <!-- FIN 2eme sous-div -->

</div><!-- FIN div class="texte_sommaire"-->
</div> <!-- FIN DIV englobante class 1900 -->

Je me suis (mal ?) inspiré de W3schools qui indique bien que :

a écrit :
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:
If you do not want to apply opacity to child elements, ....., use RGBA color values.

https://www.w3schools.com/css/tryit.asp?filename=trycss_opacity_box2
et
https://www.w3schools.com/css/css_image_transparency.asp

Mais j'ai peut-êre mal interpreté

Salut !

non c'est tout a fait correct sauf que tu as mal compris le dernier point :

a écrit :
If you do not want to apply opacity to child elements, ....., use RGBA color values

...sur le parent ! Pour éviter que opacity déborde sur les enfants

Bonjour,

W3Schools n'est pas une référence que je peux recommander, épisode 543...
Ceci dit leurs exemples sont assez parlants.
Pour le reste il y a MDN

opacity s'applique à l'élément : image de fond, bordure, couleur de fond, couleur de texte, pseudos, descendants, etc Tout ce qui se voit a cette opacité.
rgba() (que l'on peut à présent écrire rgb() et sans virgules cf. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility ) s'applique à la propriété écrite à gauche : color ou border-color ou background-color ou etc

opacity n'est pas hérité mais son effet concerne tous les descendants. Si tu redéclares un opacity: 0.4; sur un descendant, il aura 0.4x0.4 = 0.16 d'opacité...
rgb() bah ça dépend de la propriété mais disons color est héritée mais tu peux déclarer une autre valeur dans un descendant et l'effet s'arrête là (le descendant aura une autre couleur de texte que son ancêtre, classique).

Merci pour vos réponses et explications. Je repars moins ignorant