Couche de couleur semi-transparente sur l'image d'arrière-plan?

J'ai une DIV et je voudrais mettre un motif en arrière-plan. Ce motif est gris. Donc, pour le rendre un peu plus agréable, je voudrais mettre un "calque" de couleur transparente claire. Voici ce que j'ai essayé mais qui n'a pas fonctionné. Existe-t-il un moyen de placer le calque coloré sur l'image d'arrière-plan?

Voici mon CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

C'est ici:

.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 cela:

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

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

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

Celui-ci est purement CSS et ne nécessite aucun HTML supplémentaire.

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

Il existe un nombre surprenant d'utilisations de la fonction d'ombre de boîte.

De CSS-Tricks ... il y a un moyen en une étape de le faire sans z-indexation et ajout de pseudo-éléments - nécessite un gradient linéaire qui, je pense, signifie que vous avez besoin du support 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 dégradé 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');
}

En effet, la fonction de dégradé linéaire crée une image qui est ajoutée à la pile d'arrière-plan. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Essaye ça. Travaille 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;
}

Vous avez alors besoin d'un élément d'habillage avec l'image bg et en lui l'élément de contenu avec la couleur bg:

<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 moyen d'appliquer à la fois des teintes de couleur et des dégradés aux images pour rendre le texte de superposition dynamique plus facile à styliser pour la lisibilité lorsque vous ne pouvez pas contrôler les profils de couleur de l'image. Vous n'avez pas à vous soucier de z-index.

HTML

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

TOUPET

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

J'espère que ça aide

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

1. en utilisant plusieurs arrière-plans avec un gradient linéaire,
2. plusieurs arrière-plans avec un PNG généré, ou
3. styliser un: après pseudo-élément pour servir de calque d'arrière-plan secondaire.

Pourquoi si compliqué? Votre solution était presque la bonne, sauf que c'est un moyen plus facile de rendre le motif transparent et la couleur d'arrière-plan unie . Le PNG peut contenir des transparents. Utilisez donc Photoshop pour rendre le motif transparent en définissant le calque à 70% et en réenregistrant votre image. Vous n'avez alors besoin que d'un seul sélecteur. Fonctionne sur plusieurs navigateurs.

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 bases. Un exemple d'utilisation suit où je suis passé de backgroundà background-imagemais les deux propriétés fonctionnent de la même manière.

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

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

S'IL VOUS PLAIT, ATTENDEZ UNE MINUTE! IL FAUT DU TEMPS POUR CHARGER LES MODÈLES EXTÉRIEURS.

Ce site semble plutôt lent ...

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

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

• sans téléchargement

• sans html supplémentaire

• je suppose que le chargement devrait être plus rapide que l'ombre de la boîte ou le gradient linéaire

Voici une astuce 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>

Un autre avec un SVG comme image de superposition en ligne (remarque: si vous utilisez #à l'intérieur du code svg, vous devez le coder en url!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

J'ai simplement utilisé la propriété CSS d' arrière-plan sur la div d'arrière-plan cible.
Remarque: l'image d'arrière-plan accepte uniquement les fonctions de dégradé de couleurs.
J'ai donc utilisé un dégradé linéaire en ajoutant deux fois la même couleur de superposition souhaitée (utilisez la dernière valeur rgba pour contrôler l'opacité des couleurs).

Aussi, a trouvé ces deux ressources utiles pour:

1. Ajoutez du texte (ou div avec tout autre contenu) sur l'image d'arrière-plan: Hero Image
2. Flouter l'image d'arrière-plan uniquement, sans brouiller le div en haut: Image d'arrière-plan floue

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

Vous pouvez également ajouter l'opacité à votre couleur de superposition.

Au lieu de faire

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Tu peux faire:

background: url('../img/bg/diagonalnoise.png');

Créez ensuite un nouveau style pour la couleur d'opacité:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Modifiez l'opacité à n'importe quel nombre que vous voulez ci-dessous 1. Ensuite, vous faites ce style de couleur de la même taille que votre image. Ça devrait marcher.