it-swarm.com.de

So verringern Sie die Bildhelligkeit in CSS

Ich möchte die Bildhelligkeit in CSS verringern. Ich habe viel gesucht, aber alles, was ich habe, ist, wie man die Deckkraft ändern kann, aber dadurch wird das Bild heller. Kann mir jemand helfen?

90
Shadi

Das Feature, nach dem Sie suchen, ist filter. Es ist in der Lage, eine Reihe von Bildeffekten einschließlich der Helligkeit auszuführen:

#myimage {
    filter: brightness(50%);
}

Einen hilfreichen Artikel dazu finden Sie hier: http://www.html5rocks.com/de/tutorials/filters/understanding-css/

Ein anderes: http://davidwalsh.name/css-filters

Und vor allem spezifiziert das W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Beachten Sie, dass dies erst seit kurzem in CSS als Feature enthalten ist. Es ist verfügbar, aber eine große Anzahl von Browsern wird es noch nicht unterstützen, und diejenigen, die dies unterstützen, benötigen ein Herstellerpräfix (z. B. -webkit-filter:, -moz-filter usw.).

Mit SVG können Sie auch solche Filtereffekte ausführen. Die SVG-Unterstützung für diese Effekte ist gut etabliert und wird weitgehend unterstützt (die CSS-Filterspezifikationen wurden aus den vorhandenen SVG-Spezifikationen übernommen.)

Beachten Sie auch, dass dies nicht mit dem proprietären filter-Stil verwechselt werden sollte, der in alten Versionen von IE verfügbar ist (obwohl ich ein Problem mit dem Namespace-Konflikt vorhersagen kann, wenn der neue Stil sein Herstellerpräfix löscht).

Wenn dies nicht für Sie zutrifft, können Sie zwar die vorhandene opacity-Funktion verwenden, aber nicht die Art und Weise, wie Sie denken: Erstellen Sie einfach ein neues Element mit einer durchgehenden dunklen Farbe, platzieren Sie es auf Ihrem Bild und blenden Sie es mit aus opacity. Der Effekt wird dadurch hervorgerufen, dass das Bild hinter sich verdunkelt wird.

Zum Schluss können Sie die Browser-Unterstützung von filterhier überprüfen.

Hoffentlich hilft das.

146
Spudley

OP möchte verringern Helligkeit, nicht erhöhen. Die Deckkraft lässt das Bild heller erscheinen, nicht dunkler.

Sie können dies tun, indem Sie ein schwarzes div über das Bild legen und die Deckkraft dieses div einstellen.

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

DEMO

32
sachleen

Kurz gesagt, platzieren Sie Schwarz hinter dem Bild und senken Sie die Opactiy. Sie können dies tun, indem Sie das Bild in ein div einbetten und dann die Deckkraft des Bildes verringern.

Zum Beispiel:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

Hier ist ein JSFiddle.

17
JL235

Du könntest benutzen:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
14
Nahomy Atias

Mit CSS3 können wir ein Bild leicht anpassen. Aber denken Sie daran, dies ändert das Bild nicht. Es wird nur das angepasste Bild angezeigt.

Weitere Informationen finden Sie im folgenden Code.

So machen Sie ein Bild grau:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

So geben Sie einen Sepia-Look:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

So stellen Sie die Helligkeit ein:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

Kontrast einstellen:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

So verwischen Sie ein Bild:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
5
Raj Sharma

Ich habe das heute gefunden. Es hat mir wirklich geholfen. http://www.propra.nl/playground/css_filters/

Alles was Sie brauchen ist, dies Ihrem CSS-Stil hinzuzufügen:

div {-webkit-filter: brightness(57%)}
3

Sie können CSS-Filter unten und Beispiele für das Web-Kit verwenden. Bitte schauen Sie sich dieses Beispiel an: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}
1
GibboK

Wenn Sie ein Hintergrundbild haben, können Sie dies tun: Setzen Sie einen rgba () Gradienten auf das Hintergrundbild.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}
<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>
0

probieren Sie dies aus, wenn Sie ein schwarzes Bild in Weiß konvertieren müssen:

.classname{
    filter: brightness(0) invert(1);
}
0
Rizo
-webkit-filter: brightness(0.50);

Ich habe diese coole Lösung:https://jsfiddle.net/yLcd5z0h/

0