Ändern Sie die Helligkeit der hintergrund-Bild?

Frage ich mich, ob es möglich ist, um die Helligkeit zu ändern:

 body{
 background-image:url();
 }

Mithilfe von HTML/CSS. Der Grund, warum ich ändern möchte, ist weil ich habe gerade eine ziemlich lange Zeit das Bild machen, aber wenn ich es auf der website, es ist plötzlich über doppelt so hell. Ich habe im Vergleich die original-Datei und die Datei, die Eingang in die website, und Sie sind beide sehr unterschiedliche Farben von blau.

Gibt es einen Grund für diese, und gibt es eine Möglichkeit, die ich ändern kann, die Helligkeit?

Dank.

Nein, Sie können nicht. speichern Sie das Bild in der Helligkeit, die Sie benötigen....
hsivonen.fi/png-gamma
Ich glaube nicht, dass Sie Lesen Sie die vollständige Sache, Gert B, ich habe speichern Sie das Bild in der Helligkeit, die ich brauche, und die original-Datei ist perfekt, aber sobald ich es auf der website es geht plötzlich doppelt so hell, oder, zweimal die Helligkeit der Schattierung von blau.

InformationsquelleAutor user3227878 | 2014-01-26

  1. 17

    Wäre dies eine option, aber es ist nicht sehr praktisch und würde nicht funktionieren in älteren Browsern:

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

    Oder, für eine noch bessere Steuerung von Farbe, versuchen hsla() Farben:

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

    Wirklich, es ist besser zu spielen mit dem Bild in einen Bild-editor, bis Sie den browser Ergebnis Sie wollen.

    einfach und genial! danke!!!
    Nützlich zu Lesen hier: w3schools.com/colors/colors_hsl.asp

    InformationsquelleAutor ralph.m

  2. 6
    background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);

    Diese 50% weiß über das ursprüngliche Bild.

    Linear-gradient () - Funktion muss verwendet werden, sonst funktioniert es nicht.

    Oder Sie verwenden können:

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

    und das ist besser für die code Wartbarkeit.

    Das ist eine schöne Lösung, die funktioniert Super auf parallex scrolling-Container mit: background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url ("myimage".png);

    InformationsquelleAutor Martin Zvarík

  3. 5

    Gibt es keine Möglichkeit, das zu tun, funktioniert in jedem browser, aber wenn Sie möchten, können Sie es in webkit-Browsern (Chrome, Safari, Opera), indem die filter Stil:

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

    Dass die Ergebnisse in der Helligkeit reduziert, um 80% in webkit-Browsern. Ich empfehle nur sparen eine andere version Ihres Bildes, wenn Sie möchten, tun dies aber nicht.

    Doch dies verdunkelt das gesamte element einschließlich text und Rahmen.... es ist besser, verwenden Sie die Deckkraft() oder etwas anderes.
    Deckkraft muss nicht unbedingt heller, nur lässt den hintergrund durchscheinen. Für die Deckkraft, um zu zeigen, eine ähnliche Wirkung, die Sie haben, um sicherzustellen, dass das übergeordnete element hat einen weißen hintergrund. Die Anwendung background:white zu dem Bild funktioniert nicht, da der hintergrund wird auch die Deckkraft auf den gleichen Wert gesetzt für den hintergrund.

    InformationsquelleAutor Joeytje50

  4. 0

    Ich hatte das gleiche problem war, aber es war ein Gif.

    Mein workaround:

    Machte ich ein sehr kleines Schwarzes Quadrat Bild in PowerPoint ein, und legen Sie die Transparenz auf 50% und gespeichert als eine Datei namens "dimmerswitch.png"

    Als ich verwiesen, dass man sich zunächst in die code:

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

    InformationsquelleAutor Floppsy

  5. -4

    Tun Sie nur Photoshop um die Helligkeit zu verringern, wenn es keine andere Möglichkeit.

    Also, wenn deine Antwort so verstanden : "Nur photoshop-Bilder. Vergessen Sie über die Suche nach einer CSS-Regel"... ?! Okay... Kann eine Antwort sein.

    InformationsquelleAutor Taran Deep Singh

Schreibe einen Kommentar