Menu

Mettre une opacity sur un background-image [Résolu]

Messages postés
31
Date d'inscription
vendredi 10 octobre 2014
Dernière intervention
4 novembre 2018
- 6 juil. 2018 à 00:06 - Dernière réponse :
Messages postés
31
Date d'inscription
vendredi 10 octobre 2014
Dernière intervention
4 novembre 2018
- 11 juil. 2018 à 15:45
Bonjour,

Svp comment mettre une couleur en opacity sur un background ?
J'ai par exemple :
 <!-- Section 1 -->
<section class="section_one">
</section>


et le syle.css:
.section_one{
background-image: url('img/post-bg.jpg');
}


J'aimerais mettre une couleur bleue en opacity de 0.3 par exemple. Comment puis-je le faire ?
Merci
Afficher la suite 

Votre réponse

7 réponses

Messages postés
282
Date d'inscription
dimanche 7 septembre 2014
Dernière intervention
14 septembre 2018
- 6 juil. 2018 à 00:11
0
Merci
faut mettre une balise parante avec le code css

background-color: rgba(0,0,255,0.3)

r red
g green
b blue
a opacity
Commenter la réponse de nulenmathe
Messages postés
31
Date d'inscription
vendredi 10 octobre 2014
Dernière intervention
4 novembre 2018
- 6 juil. 2018 à 00:41
0
Merci
J'ai fait ceci et ça ne change rien:
.section_one{
  background-image: url('img/post-bg.jpg');
  background-color: rgba(0,0,255,0.3) 
  border: 3px solid red;
}
Commenter la réponse de Anouchka2586
Messages postés
282
Date d'inscription
dimanche 7 septembre 2014
Dernière intervention
14 septembre 2018
- 6 juil. 2018 à 08:52
0
Merci
il faut

<p class=parent>
<p class=enfant>
</p>
</p>

Tu met le couleur sur le parent et l'image sur l'enfant
Messages postés
31
Date d'inscription
vendredi 10 octobre 2014
Dernière intervention
4 novembre 2018
- 9 juil. 2018 à 14:54
ça ne marche pas. j'ai essai comme ceci mais ien n'y est fait:
<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 :
Commenter la réponse de nulenmathe
Messages postés
31
Date d'inscription
vendredi 10 octobre 2014
Dernière intervention
4 novembre 2018
- 10 juil. 2018 à 19:45
0
Merci
Svp quelqu'un peut-il m'aider ? Merci
Messages postés
282
Date d'inscription
dimanche 7 septembre 2014
Dernière intervention
14 septembre 2018
- 11 juil. 2018 à 13:17
<style>
.parent
{
width: 100%;
height: 100%;
background: url("ton image");
}

.enfant
{
width: 100%;
height: 100%;
background: rgba(0, 0, 255, 0.3);
}
</style>

<div class="parent">
<div class="enfant">
</div>
</div>
Commenter la réponse de Anouchka2586
Messages postés
31
Date d'inscription
vendredi 10 octobre 2014
Dernière intervention
4 novembre 2018
- 11 juil. 2018 à 15:45
0
Merci
ça marche merci c'est moi qui au debut entre-mélangeait les balises
Commenter la réponse de Anouchka2586