Discussion :

[samourai_]

Comment ajouter de l'opacité sur une image et y ajouter du texte ?

[Muchos]

Bonjour.
Il existe la propriété (et le filtre) opacity, mais leur rôle est éventuellement de rendre une image plus transparente. À ma connaissance, on ne peut pas rendre plus opaque une image qui, typiquement, aurait nativement un effet de transparence.

Pour l’ajout de texte, ça dépend si l’image est encadrée par un élément HTML sur lequel on pourrait appliquer le texte. Si tu as déjà le code qui concerne l’image, partage-le. Sinon, on te proposera quelque chose.

[samourai_]

j'ai essayé opacity mais ça ne fonctionne pas sur l'image. Je rassure le div est bien refermé plus bas

[samourai_]

tout le bloc

[mathieu]

vous pouvez utiliser "filter" pour rendre l'image plus sombre comme cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="conteneur images">
	<div class="zone base"></div>
	<div class="zone opaque"></div>
</div>
 
 
 
<style>
.zone
{
        height : 10em;
        background : url(https://upload.wikimedia.org/wikipedia/commons/3/38/C%C3%A9toine_dor%C3%A9e_vol.jpg);
        background-size : 12%;
}
 
.zone.opaque
{
        filter : brightness(20%);
}
 
</style>