Mettre une opacity sur un background-image

Résolu/Fermé

Anouchka2586 Messages postés 51 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 - 6 juil. 2018 à 00:06
Anouchka2586 Messages postés 51 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 - 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

A voir également:

Opacité background-image css
Background image opacity - Meilleures réponses
Opacity background image - Meilleures réponses
Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

5 réponses

Réponse 1 / 5

Anouchka2586 Messages postés 51 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
6 juil. 2018 à 00:41

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

Réponse 2 / 5

Anouchka2586 Messages postés 51 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
10 juil. 2018 à 19:45

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

nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 150
11 juil. 2018 à 13:17

Réponse 5 / 5

nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 150
6 juil. 2018 à 08:52

il faut

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

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

Anouchka2586 Messages postés 51 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
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 :

Discussions similaires

Background semi-transparent

CSS background / transparence

Remplacer une image par une autre uniquement avec le CSS

mettre image sur toute la largeur du site

adapter la largeur d'une image à la taille de l'écran

Aligner trois images horizontalement

Discussions similaires

Newsletters