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

Mettre une opacity sur un background-image Problème CSS background-image [Résolu] (Résolu) » Forum - CSS [css] background image [Résolu] (Résolu) » Forum - CSS Background image HTML (Résolu) » Forum - HTML Background-image qui ne marche pas (Résolu) » Forum - CSS 2 background-image + 1 background -color : possible ? (Résolu) » Forum - CSS

span Anouchka2586 7 réponses

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

Tag:

Forum

Mettre une opacity sur un background-image Problème CSS background-image [Résolu] (Résolu) » Forum - CSS [css] background image [Résolu] (Résolu) » Forum - CSS Background image HTML (Résolu) » Forum - HTML Background-image qui ne marche pas (Résolu) » Forum - CSS 2 background-image + 1 background -color : possible ? (Résolu) » Forum - CSS

Web: www.shapebootstrap.net

7 réponses

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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; }

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

il faut

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

Tu met le couleur sur le parent et l'image sur l'enfant

Reply
réponses:

  • Anouchka2586 on 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 :

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

Svp quelqu'un peut-il m'aider ? Merci

Reply
réponses:

  • nulenmathe on 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>

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

ça marche merci c'est moi qui au debut entre-mélangeait les balises

Reply

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed