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


213

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

Réponses:


217

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


11
il n'y a absolument aucune raison pour un positionnement relatif et absolu.
Sven Bieder

2
Ah oui, bien sûr, j'étais un peu dans le popup modal, je ne sais pas pourquoi. Votre réponse est bien sûr plus propre et plus facile.
Johannes Klauß

@ JohannesKlauß comment se fait-il que sa réponse soit plus propre et plus facile? cela ne fonctionne pas, du moins pour mon cas.
Danny22

2
Je pense que c'est plus propre. L'ombre de la boîte a des problèmes si le contenu n'est pas plus long que bg etc.
Jack

1
Solution parfaite!
Roy Shoa

302

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.


3
Très agréable! Est-ce une bonne idée en termes de performances? Je n'ai pas examiné les performances de box-shadow
Miguel Stevens

18
Joli hack mais un gros tueur de performance. Cela ralentira chaque appareil mobile. L'ombre de la boîte entraîne des problèmes de performances sur les appareils mobiles. Il vaut mieux l'éviter, surtout s'il y a d'autres façons de procéder.
Hexodus

4
Vous êtes un génie monsieur!
Mika

7
Juste une mise à jour quelques années plus tard: j'utilise actuellement cette méthode partout sur kotulas.com, et je n'ai remarqué aucun ralentissement significatif. Cela pourrait devenir un problème si vous l'utilisez sur des centaines d'éléments, mais même sur une page avec plus de 150 images, ce n'est pas un problème pour moi. (Et c'est sur un ordinateur de travail.) Naturellement, vous voudrez le tester à l'avance pour vous assurer qu'il vous convient. Et en ce qui concerne la compatibilité avec les anciens navigateurs, puisque le repli est que l'utilisateur ne voit pas d'effet de survol (sans autres problèmes), je suis d'accord avec ça.
BevansDesign

8
Personnellement , j'utiliser comme ceci: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Neurotransmetteur

135

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

Cela a très bien fonctionné, vous ne pouvez pas animer de dégradés, mais si vous souhaitez pulser une couleur, ne pensez pas que cela soit possible avec n'importe quelle méthode.
sricks

1
J'avais background-size:cover;et background-position:center center;mis sur cet élément. Cela semble annuler cet effet.
Solace

Fonctionne très bien avec une taille d'arrière-plan: couverture; après. Sur chrome au moins.
davidbonachera

Certainement le moyen le plus pratique pour teinter les motifs d'arrière-plan et les images, mais faites attention à le vérifier avec Chrome et d'autres, surtout s'il est appliqué à la balise body, le chrome défilera avec une tonne de décalage. FF le gère bien.
Hastig Zusammenstellen

4
Suis-je le seul assez âgé pour obtenir la référence Tom?
Abram


26

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

2
C'est une très bonne réponse qui ne nécessite pas d'éléments HTML supplémentaires. Merci!
patr1ck

26

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

16

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


Cela fonctionne, mais vous devez modifier le deuxième "left: 0;" à "en bas: 0;"
Matthew Hudson

1
Cela devrait être la réponse acceptée car elle évite la création d'éléments inutiles. Assurez-vous simplement que votre image .background diva au moins une position: relative
mjsarfatti

6

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.

4
Veuillez ne pas publier de liens comme réponses. Mettez le code pertinent ici, mais liez également la source à partir de laquelle vous l'avez copié.
Blazemonger

4

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


Pouvez-vous appliquer la couleur d'arrière-plan avec par exemple :hoveret cela se superposerait sur l'image d'arrière-plan?
Sir

il faudrait plus de temps pour démarrer Photoshop et faire cela, plutôt que d'ajouter quelques lignes de code.
nihiser

J'ai essayé mais j'ai trouvé que le png transparent était assez volumineux (~ 500kb) en taille de fichier, ce qui peut être un inconvénient de cette approche
madz

@madz J'ai parlé de créer un modèle - qui ne devrait pas entraîner un gros fichier. J'ai ajouté un exemple en utilisant une image 110x110px qui a aussi peu que 5 Ko. Si vous avez vraiment besoin d'une image plus grande, essayez d'utiliser tinypng.com pour la compresser.
Hexodus

2

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


2

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>


1

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;

0

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

0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.