web-dev-qa-db-fra.com

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

J'ai une DIV et j'aimerais mettre un motif en arrière-plan. Ce motif est gris. Donc, pour que ce soit un peu plus agréable, je voudrais mettre une "couche" de couleur légèrement transparente. Voici ce que j'ai essayé mais qui n'a pas fonctionné. Est-il possible 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);
cssbackground-imagebackground-color
181
Marc

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 dans la classe .background s'il n'y a pas d'autres éléments à l'intérieur.

187
Johannes Klauß

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

Celui-ci est pur CSS, 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 de la fonctionnalité box-shadow.

267
BevansDesign

Depuis CSS-Tricks ... il existe un moyen en une étape de le faire sans z-indexing ni ajout de pseudo-éléments - nécessite un dégradé linéaire, ce qui signifie que vous avez besoin du support de 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);
}
107
Tom

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

Cela est dû au fait que 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

40
TorranceScott

Vous avez ensuite besoin d'un élément d'habillage avec l'image bg et de 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%;
}
25
Sven Bieder

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

J'ai utilisé cette méthode à la fois pour appliquer des teintes de couleur et des dégradés aux images afin de rendre plus facile la superposition dynamique du texte, pour plus de lisibilité lorsque vous ne pouvez pas contrôler les profils de couleur des images. 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);
  }

J'espère que ça aide

12
d4ncer

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

  1. en utilisant plusieurs arrière-plans avec un dégradé linéaire,
  2. plusieurs arrière-plans avec un PNG généré, ou
  3. le style d'un pseudoélément après: agira comme un calque d'arrière-plan secondaire.
5
Kevin C.

Pourquoi si compliqué? Votre solution était presque exacte, sauf que c'est un moyen plus facile de rendre le motif transparent et la couleur de fond continue. Le format PNG peut contenir des transparents. Utilisez donc photoshop pour rendre le motif transparent en définissant le calque sur 70% et en enregistrant de nouveau votre image. Ensuite, vous n'avez besoin que d'un 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. Voici un exemple d'utilisation dans lequel je suis passé de background à background-image, mais 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>

VEUILLEZ ATTENDRE UNE MINUTE! IL FAUT UN TEMPS POUR CHARGER LES MOTIFS EXTERNES.

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

3
Hexodus

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

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

  • sans télécharger

  • sans html supplémentaire

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

2
Fanky

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