Semi-transparent couleur de la couche au fond de l'image?

Ici, il est:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML pour ceci:

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

Bien sûr, vous devez définir une largeur et la hauteur de la .background classe, si il n'y a pas d'autres éléments à l'intérieur d'elle

De CSS-Tricks... il y a une étape de la façon de le faire sans z-indexation et l'ajout d'éléments pseudo-exige de dégradé linéaire qui je pense signifie que vous avez besoin 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 avez besoin alors d'un élément d'habillage avec le bg de l'image et le contenu de l'élément avec le bg couleur:

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

et le 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%;
}

J'ai utilisé cela comme un moyen à la fois d'appliquer les teintures ainsi que les gradients des images dynamiques pour la superposition de texte plus facile à coiffer pour la lisibilité lorsque vous ne pouvez pas contrôler les couleurs de l'image profils. 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ère que cela aide

Pourquoi faire si compliqué? Votre solution était presque juste, sauf que c'est un moyen plus facile de de rendre le modèle transparent et la couleur d'arrière-plan solide. PNG peut contenir des transparents. Donc, l'utilisation de photoshop pour rendre le modèle transparent en définissant le calque à 70% et de réenregistrer votre image. Ensuite, vous avez seulement besoin d'un 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> 

Ce sont les de base. Un exemple d'utilisation suit où je suis passé de background à background-image mais les deux propriétés fonctionne de la même.

CSS:

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

HTML:

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

ATTENDEZ UNE MINUTE! IL FAUT UN CERTAIN TEMPS POUR CHARGER LES MODÈLES EXTERNES.

Ce site semble être plutôt lent...

Ici est un truc simple avec uniquement du css.

HTML:

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