Ajouter une opacité à une image

**samourai_** · 25/07/2024, 01h24

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

**Muchos** · 25/07/2024, 15h16

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_** · 26/07/2024, 00h40

Nom : Capture d'écran 2024-07-26 003057.png
Affichages : 58
Taille : 10,3 Ko

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

**samourai_** · 26/07/2024, 00h49

Nom : Capture d'écran 2024-07-26 003010.png
Affichages : 56
Taille : 34,5 Ko

tout le bloc

**mathieu** · 26/07/2024, 00h56

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>

**Muchos** · 27/07/2024, 21h07

Pour le texte superposé à l’image (j’imagine que c’est l’effet voulu).

Ex. 1 (avec image dans le HTML)

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
22
23
24
25
<style>
.img__container {
  width: 320px;
  height: 240px;
}
.img__container .overlay {
  height: inherit;
  position: relative;
  bottom: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
<body>
<div class="img__container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/320px-LotusBud0048a.jpg" />
  <div class="overlay">
    <p>Ma marque</p>
    <p>Ma phrase qui sert de slogan.</p>
  </div>
</div>
</body>

Ex. 2 (avec image en CSS)

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
<style>
.img__container {
  background: center/cover no-repeat url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/320px-LotusBud0048a.jpg");
  width: 320px;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
<body>
<div class="img__container">
  <div class="overlay">
    <p>Ma marque</p>
    <p>Ma phrase qui sert de slogan.</p>
  </div>
</div>
</body>

Note : copiez-collez votre code désormais plutôt qu’utiliser une image !

Ajouter une opacité à une image

CSS

Discussions similaires

Partager

Partager