28182 sujets
CSS et mise en forme, CSS3
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
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 -->
<!-- la div class ="texte_sommaire" ci-dessous comprend 2 "sous-div" -->
MON TITRE ICI
<!-- 1ere sous-div -->
MON TEXTE ICI
</div> <!-- FIN 1ere sous-div -->
<!-- 2eme sous-div -->
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 :
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é
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é
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).
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).
