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

Question

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

Voici mon CSS :

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

Answer 1

Je sais que c'est un très vieux sujet, mais il apparaît en tête de liste dans Google, alors voici une autre option.

Celui-ci est purement CSS, et ne nécessite pas de 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 "box-shadow".

Answer 2

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 entendu, vous devez définir une largeur et une hauteur à l'élément .background s'il n'y a pas d'autres éléments à l'intérieur.

Answer 3

D'après CSS-Tricks... il y a un moyen de faire cela en une seule étape sans z-indexation et sans ajouter de pseudo-éléments - il faut un gradient linéaire, ce qui signifie, je pense, 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);
}

Answer 4

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

Cela est dû au fait que la fonction de gradient 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

Answer 5

Essayez ceci. Ca marche 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;
}