[Résolu] Probleme de texte non opaque sur fond image translucide

Bonjour
Mon probleme est que sur un titre en h2 je veux écrire un texte totalement opaque sur une image qui ne l.est pas et je n'y arrive pas ! Mon titre prend l'opacité de mon image....
Sur ma page html5 j'ai
<h2>mon titre</h2>
Sur la page css3 j'ai
h2
{
background-image:url ("mon image.jpg");
background-color:rgba (x,x,x,0.5);
}

Cela doit être tout bête.....mais impossible de garder mon texte complètement opaque !
Merci à vous

Bonsoir,
Je suis sur Mac ! Avec Safari
Effectivement sur beaucoup de site internet la procédure serait celle que j'applique à savoir rgba
Modifié par Norge38 (19 Nov 2016 - 19:46)

Norge38 a écrit :
Je suis sur Mac !
Effectivement sur beaucoup de site internet la procédure serait celle que je.applique à savoir rgba

Et je travail avec sublime text 2
Modifié par Norge38 (19 Nov 2016 - 19:43)

Il y a quelque chose que je ne comprends pas : mettre une image en background doit recouvrir la couleur que l'on peut y mettre. Donc opacité ou pas du background-color, ça n'a pas d'importance... sauf si l'image ne se charge pas.

Bref, c'est une curieuse question...

Zelena a écrit :
Il y a quelque chose que je ne comprends pas : mettre une image en background doit recouvrir la couleur que l'on peut y mettre. Donc opacité ou pas du background-color, ça n'a pas d'importance... sauf si l'image ne se charge pas.

Bref, c'est une curieuse question...

Peut être que le probleme est dans ma question héhé
J'explique, dans mon titre <h2> j'ai à la fois une image et un texte. Mais pas de couleur effectivement. Je veux réduire l'opacité de mon image sans réduire l'opacité de mon texte... comment faire ?

en sachant que j'ai essayé de passer par opacity je réduis l'opacité de tout, et je me disais sûrement à tort qu'en passant par background-color rgba ct la bonne solution en jouant simplement sur la valeur Alpha ....
Alors peut être que je ne devrais pas passer par background-color effectivement .....je ne sais pas !
Merci
Modifié par Norge38 (20 Nov 2016 - 10:59)

Si vous voulez réduire l'opacité de l'image pour que le texte soit plus visible, le plus simple est de diminuer la saturation et/ou d'augmenter la luminosité dans un logiciel de retouche d'image.
Dans un cas contraire, il y a background-blend-mode d'un emploi délicat.

Modifié par Zelena (20 Nov 2016 - 12:22)

Zelena a écrit :
Si vous voulez réduire l'opacité de l'image pour que le texte soit plus visible, le plus simple est de diminuer la saturation et/ou d'augmenter la luminosité dans un logiciel de retouche d'image.
Dans un cas contraire, il y a background-blend-mode d'un emploi délicat.

Merci pour votre réponse....dans la même idée je pourrais reprendre l'image avant sur Photoshop.... mais bon, j'en suis sûr qu'il y'a une façon assez simple avec css. Je ne dois pas être le 1er à mettre du texte sur une photo
Modifié par Norge38 (20 Nov 2016 - 15:26)

gcyrillus a écrit :
une piste en fake( ou alternative a[b] background-blend-mode ou flter: contast() brightness() ) [/i]peut-être ?
http://codepen.io/gc-nomade/pen/wouBe un box-shadow: inset 0 0 0 xxxxpx rgba();

cordialement

Merci pour la réponse , j'ai testé mais ça ne marche pas.
Par contre j'ai trouvé la réponse à mon problème sur un site au hasard des recherches ! Je sais maintenant réduire l'opacité d'un background image sans réduire l'opacité du texte qui va dessus.
Si cela intéresse qq'un !

Merci à tous
Modifié par Norge38 (23 Nov 2016 - 19:36)

Si tu as trouvé la reponse a ta question, alors partage la et passe ton post en résolu.

Cela sera utile a d'autres utilisateurs.
C'est le but des forums en quelque sortes
Modifié par gcyrillus (23 Nov 2016 - 20:46)

gcyrillus a écrit :
Si tu as trouvé la reponse a ta question, alors partage la et passe ton post en résolu.

Cela sera utile a d'autres utilisateurs.
C'est le but des forums en quelque sortes

Ha ouais ) ...Bien sûr...voici la syntaxe

CODE HTML

<div id="main">
<div id="first">
</div>
<div id="second">
<h2 id="container">blablabla</h2>
</div>
</div>

CODE CSS

#main
{
position:relative;
}

div#first
{
background-image:url(".jpeg");
opacity:0.7;
width:300px;
height:300px;
}
div#second
{
width:300px;
height:300px;
position:absolute;
top: 0;
left:0;
Modifié par Norge38 (24 Nov 2016 - 06:44)