Mettre une opacity sur un background-image

Résolu

Anouchka2586 Messages postés 47 Date d'inscription Statut Membre Dernière intervention -
Anouchka2586 Messages postés 47 Date d'inscription Statut Membre Dernière intervention - 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

5 réponses

Réponse 1 / 5

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
Anouchka2586 Messages postés 47 Date d'inscription Statut Membre Dernière intervention 5
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;
}
```
3
Réponse 2 / 5
Anouchka2586 Messages postés 47 Date d'inscription Statut Membre Dernière intervention 5

Svp quelqu'un peut-il m'aider ? Merci
1
1. nulenmathe Messages postés 501 Statut Membre 152
  
  <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>
  
  0
Réponse 3 / 5
Anouchka2586 Messages postés 47 Date d'inscription Statut Membre Dernière intervention 5

ça marche merci c'est moi qui au debut entre-mélangeait les balises
1
Réponse 4 / 5
nulenmathe Messages postés 501 Statut Membre 152

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
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
nulenmathe Messages postés 501 Statut Membre 152

il faut

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

Tu met le couleur sur le parent et l'image sur l'enfant
0
1. Anouchka2586 Messages postés 47 Date d'inscription Statut Membre Dernière intervention 5
  
  ç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 :
  
  0

Mettre une opacity sur un background-image

5 réponses

Discussions similaires

Newsletters