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

Mettre une opacity sur un background-image Image en arrière plan sur une page html (Résolu) » Forum - HTML [css] background image (Résolu) » Forum - CSS Problème de background-image sur Mozilla (Résolu) » Forum - Webmaster [CSS & IE7]background-image property (Résolu) » Forum - CSS Background-images ne fonctionne pas (Résolu) » Forum - Webmaster

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

Forum

Mettre une opacity sur un background-image Image en arrière plan sur une page html (Résolu) » Forum - HTML [css] background image (Résolu) » Forum - CSS Problème de background-image sur Mozilla (Résolu) » Forum - Webmaster [CSS & IE7]background-image property (Résolu) » Forum - CSS Background-images ne fonctionne pas (Résolu) » Forum - Webmaster

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

    ç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

    <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