it-swarm.com.de

Helligkeit des Hintergrundbildes ändern?

Ich frage mich, ob es möglich ist, die Helligkeit von zu ändern:

 body{
 background-image:url();
 }

Verwendung von HTML/CSS. Der Grund, warum ich es gerne ändern würde, ist, dass ich das Bild ziemlich lange gemacht habe, aber wenn ich es auf die Website stelle, ist es plötzlich etwa doppelt so hell. Ich habe die Originaldatei und die Datei, die in die Website eingegeben wird, verglichen, und beide weisen sehr unterschiedliche Farben von Blau auf.

Gibt es einen Grund dafür und kann ich die Helligkeit ändern?

Vielen Dank.

16
user3227878

Dies wäre eine Option, die jedoch nicht sehr praktisch ist und in älteren Browsern nicht funktioniert:

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

Um die Farbsteuerung noch besser zu gestalten, probieren Sie hsla() colors:

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

Es ist wirklich besser, mit dem Bild in einem Bildeditor zu spielen, bis Sie das gewünschte Browser-Ergebnis erhalten.

18
ralph.m
background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);

Dadurch wird das Originalbild zu 50% weiß.

Linear-Gradienten-Funktion muss verwendet werden, sonst funktioniert es nicht.

Oder Sie können verwenden:

.someObj:after{ content:''; background:rgba(255,255,255,.5); .... }

und dies ist besser für die Code-Wartbarkeit.

8
Martin Zvarík

Es gibt keine Möglichkeit, dies in jedem Browser zu tun, aber wenn Sie möchten, können Sie dies in Webkit-Browsern (Chrome, Safari, Opera) tun, indem Sie den Stil filter verwenden:

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

Dies führt dazu, dass die Helligkeit in Webkit-Browsern auf 80% reduziert wird. Ich empfehle jedoch, nur eine andere Version Ihres Images zu speichern, wenn Sie dies tun möchten.

5
Joeytje50

Ich hatte das gleiche Problem, aber es war mit einem Gif.

Mein Workaround:

Ich habe ein sehr kleines schwarzes Quadratbild in PowerPoint erstellt, die Transparenz auf 50% gesetzt und als Datei mit dem Namen "dimmerswitch.png" gespeichert.

Dann habe ich zuerst im Code darauf verwiesen:

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