web-dev-qa-db-fra.com

Comment puis-je teinter une image d'arrière-plan avec CSS?

J'ai une image d'arrière-plan configurée via CSS.

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

Je prévois d'avoir une image de fond différente pour les différentes pages du site Web: il est donc important que le texte soit lisible par-dessus. En ce moment, j'ai un fond noir translucide dans ma zone de contenu #main au milieu comme ceci afin d'assurer la lisibilité:

#main {
background: rgba(0, 0, 0, 0.5);
}

Ce que je veux vraiment faire, cependant, c'est d'avoir ce genre d'arrière-plan translucide sur toute l'image d'arrière-plan, car la boîte noire semble un peu maladroite. J'ai essayé de faire un <div id=#tint> qui inclut tout le document HTML et donne rgba (0, 0, 0, 0.5) à #tint, mais cela ne fonctionne pas du tout - je ne peux rien faire changer ou je peux obtenir l'arrière-plan entier pour devenir un gris simple sans image d'arrière-plan visible. N'est-ce tout simplement pas possible?

cssbackgroundtint
32
user1623053

Je pense que vous devez créer un élément de superposition (potentiellement div) qui a le fond translucide recherché. Quelque chose comme:

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

Et bien sûr, une petite démo: petit lien .

17
Chris

Utilisation background-blend-mode pour une teinte simple

Vous pouvez utiliser le background-blend-mode propriété css:

.background-tint {
  background-color: rgba(200,100,0,.5); // Tint color
  background-blend-mode: multiply;
}

Placez-le sur n'importe quel élément avec une image de fond et vous êtes prêt à partir.

La propriété est bien prise en charge dans les navigateurs modernes [~ # ~] pas [~ # ~] y compris IE les plus récents et Edge ( état de prévisualisation peut être activé avec un indicateur). Pour les navigateurs non compatibles, vous pouvez utiliser un polyfill .

Démo de travail

Autres options

Utilisez un dégradé linéaire plat et une superposition d'arrière-plan multiple

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

Je pense que c'est la technique la plus utilisée, mais elle a l'inconvénient d'être codée en dur, c'est-à-dire que vous ne pouvez pas simplement prendre un cours, le coller sur un élément et faire une teinte.

Vous pouvez en faire un mixin moins ou plus, quelque chose comme:

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

Démo de travail

Utilisez un fond transparent

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

Cette méthode a l'avantage de fonctionner sur la plupart des navigateurs et n'est qu'une classe Nice que vous ajoutez à n'importe quel élément. L'inconvénient est que si vous avez autre chose à l'intérieur de cet élément, vous devrez l'envelopper dans une div avec une sorte de positionnement position: relative fonctionnerait mieux.

Exemple:

<div class="background-tint">
  <div class="u-relative">Some text here</div>
</div>

.u-relative { position: relative; }

Démo de travail

64
hitautodestruct

Cela a très bien fonctionné pour moi:

https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

Et en s'appuyant sur une autre réponse, vous pouvez le faire avec des couleurs existantes en moins comme:

linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),
4
Chris Moschini

Ce serait la propriété overlayhttps://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay Mais c'est un brouillon. Ne vous y fiez pas

1
yunzen

Essayez l'opacité:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
0
tahdhaze09