web-dev-qa-db-fra.com

Changer la luminosité de l'image de fond?

Je me demande s'il est possible de changer la luminosité de:

 body{
 background-image:url();
 }

Utilisation de HTML/CSS. La raison pour laquelle je voudrais le changer, c'est parce que je viens de passer assez de temps à créer l'image, mais lorsque je la mets sur un site Web, elle devient soudain deux fois plus brillante. J'ai comparé le fichier d'origine et le fichier qui est entré dans le site Web et ils sont tous les deux de couleurs de bleu très différentes.

Y a-t-il une raison à cela et y a-t-il un moyen de changer la luminosité?

Merci.

htmlcssimagebackgroundbrightness
16
user3227878

Ce serait une option, mais ce n’est pas très pratique et ne fonctionnerait pas dans les anciens navigateurs:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Ou encore, pour un meilleur contrôle des couleurs, essayez les couleurs hsla():

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

En réalité, il est préférable de jouer avec l'image dans un éditeur d'image jusqu'à obtenir le résultat de navigateur souhaité.

18
ralph.m

Il n’existe aucun moyen de le faire qui fonctionne dans tous les navigateurs, mais si vous le souhaitez, vous pouvez le faire dans les navigateurs Web (Chrome, Safari, Opera) en utilisant le style filter:

img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

La luminosité est ainsi réduite à 80% dans les navigateurs Webkit. Je recommande simplement de sauvegarder une autre version de votre image si vous voulez le faire.

5
Joeytje50

J'ai eu le même problème, mais c'était avec un Gif.

Ma solution de contournement:

J'ai créé une très petite image carrée noire dans PowerPoint, j'ai réglé sa transparence à 50% et je l'ai enregistrée dans un fichier appelé "dimmerswitch.png".

Alors j'ai référencé celui-là en premier dans le code:

body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}
0
Floppsy