Couche de couleur Semi-transparente sur Fond-image?

je sais que c'est un fil très ancien, mais il apparaît en haut dans Google, donc voici une autre option.

celui-ci est CSS pur, et ne nécessite pas de HTML supplémentaire.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

il y a un nombre surprenant d'utilisations pour la fonction box-shadow.

de CSS-Tricks... il y a un moyen en une étape pour le faire sans z-indexation et l'ajout de pseudo éléments -- nécessite un gradient linéaire qui je pense signifie que vous avez besoin de soutien CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

vous pouvez également utiliser un gradient linéaire et une image: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

c'est parce que la fonction de gradient linéaire crée une Image qui est ajoutée à la pile de fond. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

vous avez alors besoin d'un élément d'enrubannage avec l'image bg et dans lui l'élément de contenu avec la couleur bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

et la css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

essayez ceci. Fonctionne pour moi.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

j'ai utilisé ceci comme un moyen d'appliquer des teintes de couleur aussi bien que des gradients aux images pour rendre le texte de superposition dynamique plus facile au style pour la lisibilité quand vous ne pouvez pas contrôler les profils de couleur d'image. Vous n'avez pas à vous soucier de z-index.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Espérons qu'il aide

voir ma réponse à https://stackoverflow.com/a/18471979/193494 pour un aperçu complet des solutions possibles:

1. utilisant des fonds multiples avec un gradient linéaire,
2. arrière-plans multiples avec PNG généré, ou
3. Style an: après pseudoelement pour agir comme couche de fond secondaire.

pourquoi si compliqué? Votre solution était presque juste, sauf qu'il est beaucoup plus facile de rendre le modèle transparent et la couleur de fond solide . PNG peut contenir des transparences. Utilisez donc photoshop pour rendre le motif transparent en réglant la couche à 70% et en resavant votre image. Alors vous n'avez besoin que d'un seul sélecteur. Les œuvres de la croix-navigateur.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

vous pouvez utiliser un pixel semi-transparent, que vous pouvez générer par exemple ici , même en base64 Voici un exemple avec blanc 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• sans téléchargement

• sans extra html

• je suppose que le chargement devrait être plus rapide que le box-shadow ou la pente linéaire

voici un truc plus simple avec seulement css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>