Mettre une opacity sur un background-image

Anouchka25
Les bases HTML/CSS

Bonjour,

Svp comment mettre une couleur en opacity sur un background ?
j'ai essai comme ceci mais rien n'y est fait, l'image n'apparait pas: 

<div class="row parent" style="background-color:red; opacity: 0.1;">
       <div class="enfant" style="background-image: url('img/bloc1.png'); background-repeat: no-repeat; background-size: 100% auto; height: 598px;">
      </div>
    </div>

Voici le rendu et l'image n'apparait pas :

3 réponses

Naruhiko315
Réponse acceptée

Bonjour,

Personnellement avec ton code et une image visible, ça fonctionne correctement : 

<div style="background-color:red; opacity: 0.1;">
    <div style="background-image: url('img/blocs'); background-repeat: no-repeat; background-size: 100% auto; height: 598px;">
    </div>
</div>

Ce qui donne :

Deux possibilités :

  • Ton image n'est pas trouvée (lien URL incorrect, tu peux le vérifier en inspectant ta page dans la console, tu auras probablement une erreur 404)
  • La classe " row parent " ou " enfant " cause un problème.

Cordialement,

Anouchka25
Auteur

Non en fait je veux une couleur précise en opacity hors ce que j'obtiens c'est du flouté ! J'ai plusieurs backgroup et je veux mettre une couleur spécifique sur chaque backroung-image

Anouchka25
Auteur

ça marche merci c'est moi qui au debut mélangeais les balises