So verringern Sie die Bildhelligkeit in CSS

105

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

css

— Shadi
quelle

Sie können Attribut Deckkraft verwenden

— Satinder singh

Ich habe es benutzt, aber es erhöht die Helligkeit ...

— Shadi

Die akzeptierte Antwort funktioniert gut, aber es gibt auch einen neuen CSS-Standardeffekt filter, den Sie für die Zukunft kennen sollten. Siehe meine Antwort.

— Spudley

1

@shady, können Sie diese Frage noch einmal wiederholen, um eine der Antworten zu markieren, die Lösungen mit Filtern als richtig anbieten. Die Antwort, die Sie als richtig markiert haben, wäre der Weg, dies im Jahr 2006 zu tun.

— Wes Modes

174

Die Funktion, die Sie suchen, ist filter. Es ist in der Lage, eine Reihe von Bildeffekten zu erzielen, einschließlich der Helligkeit:

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

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

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

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

Beachten Sie, dass dies erst seit kurzem in CSS als Feature verfügbar ist. Es ist möglich, aber eine große Anzahl von Browsern da draußen wird es noch nicht unterstützen, und diejenigen , die Unterstützung zu tun wird es einen Anbieter Präfix erfordern (dh -webkit-filter:, -moz-filterusw.).

Es ist auch möglich, solche Filtereffekte mit SVG durchzufü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 filterStil zu verwechseln ist, der in alten IE-Versionen verfügbar ist (obwohl ich ein Problem mit dem Namespace-Konflikt vorhersagen kann, wenn der neue Stil sein Herstellerpräfix fallen lässt).

Wenn nichts davon für Sie funktioniert, können Sie die vorhandene opacityFunktion weiterhin verwenden , aber nicht so, wie Sie denken: Erstellen Sie einfach ein neues Element mit einer durchgehenden dunklen Farbe, platzieren Sie es über Ihrem Bild und blenden Sie es mit aus opacity. Der Effekt besteht darin, dass das Bild dahinter abgedunkelt wird.

Schließlich können Sie die Browserunterstützung filter hier überprüfen .

— Spudley
quelle

32

OP möchte die Helligkeit verringern , nicht erhöhen. Durch die Deckkraft erscheint das Bild heller und 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

— Sachleen
quelle

24

Die Deckkraft macht nichts heller oder dunkler. Es ändert die Transparenz des Objekts. Ob dies dazu führt, dass etwas heller oder dunkler wird, hängt von der Hintergrundfarbe hinter dem Objekt ab, dessen Deckkraft Sie ändern. Im Gegensatz zu Ihrer Aussage können Sie etwas dunkler machen, indem Sie die Deckkraft erhöhen, wenn Sie es auf einen schwarzen Hintergrund stellen. Ein zu 99% transparentes Bild auf schwarzem Hintergrund erscheint fast schwarz. Ich verstehe daher nicht, warum ein separates Overlay-Div erforderlich ist. Sie können es einfach auf einen schwarzen Hintergrund setzen. Beispiel: jsbin.com/isemec/1/edit

— NickG

@ NickG Ich sagte, dass unter der Annahme von weißem Hintergrund. Was Sie getan haben, ist dasselbe wie mein Code, nur dass ich eine halbtransparente schwarze Überlagerung über das Bild gelegt habe und Sie einen undurchsichtigen schwarzen Hintergrund mit einem halbtransparenten Bild darüber haben.

— Sachleen

17

Kurz gesagt, platzieren Sie Schwarz hinter dem Bild und verringern Sie die Opaktie. Sie können dies tun, indem Sie das Bild in ein Div einschließen und dann die Deckkraft des Bildes verringern.

Beispielsweise:

<!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 eine JSFiddle.

— JL235
quelle

15

Du könntest benutzen:

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

— Nahomy Atias
quelle

9

Diese Richtlinie "Lasst uns Präfixe nur für den Fall werfen" ist falsch. Erstens, wenn Opera es jemals unterstützt, wird es nicht haben -o-(Opera verwendet jetzt Webkit / Blink), zweitens sprang Firefox direkt in ein nicht vorangestelltes filter, drittens haben Sie die falsche Reihenfolge, ein nicht vorangestelltes sollte das letzte sein, das vierte, Die Syntax für IE -ms-filterist anders ( progid:DXImageTransformusw.), fünftens ist die Syntax für Firefox anders und erfordert SVG ( siehe Dokumente ). Sechstens werden neue Funktionen wahrscheinlich nicht vorangestellt, da die Anbieter erkannt haben, wie schlecht eine Idee war

— Camilo Martin

5

@CamiloMartin, dann hätten Sie eine vollständigere Antwort auf diese Frage geben sollen, da sie noch nicht vollständig beantwortet wurde.

— Wes Modes

-Webkit-Filter: Helligkeit () / -Webkit-Filter: Kontrast () funktioniert. Dies ist eine passende Antwort auf die Frage.

— Shilpa

Sie können es in Sass Mixin wie folgt verwenden

— Erez Lieberman

6

Mit CSS3 können wir ein Bild einfach anpassen. Denken Sie jedoch daran, dass dies das Bild nicht verändert. 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%);
}

Um einen Sepia-Look zu geben:

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

So passen Sie die Helligkeit an:

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

So stellen Sie den Kontrast ein:

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

So verwischen Sie ein Bild:

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

— Raj Sharma
quelle

1

Bitte posten Sie nicht genau dieselbe Antwort auf mehrere Fragen: Entweder passt sie nicht für alle oder die Fragen sind Duplikate, die als solche gekennzeichnet / geschlossen werden sollten.

— Kleopatra

3

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

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

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

— Geist in Bewegung
quelle

2

Wenn Sie ein Hintergrundbild haben, können Sie dies tun: Legen Sie einen rgba () -Gradienten für das Hintergrundbild fest.

.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>

Erweitern Sie das Snippet

— Sébastien Gicquel
quelle

Ausgezeichnet. Ich brauchte eine Lösung, um ein Hintergrundbild abzudunkeln, und alle anderen Antworten verdunkeln das gesamte Div.

— Nuander

1

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

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

— GibboK
quelle

0

-webkit-filter: brightness(0.50);

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

— Prashant Ghimire
quelle

0

Versuchen Sie dies, wenn Sie ein schwarzes Bild in ein weißes konvertieren müssen:

.classname{
    filter: brightness(0) invert(1);
}

— Rizo
quelle

-3

Mögen

.classname
{
 opacity: 0.5;
}

— Satinder singh
quelle

danke aber dass das Erhöhen der Helligkeit es nicht verringert !!

— Shadi

Das hängt von der Hintergrundfarbe ab.

— Apokalypse

rechts @zgnilec es hängt von der Hintergrundfarbe ab ... wenn Sie es schwarz setzen, wird die Helligkeit des Bildes verringert

— Shadi

Dies funktioniert nicht, um die Helligkeit um mehr als 100% zu erhöhen. Die Deckkraft kann nur bis zu 1

— betragen

Da ich kein Englisch spreche, wollte ich eigentlich nach "Opazität" suchen und bekam diese Antwort trotzdem vorgeschlagen. Auch wenn diese Antwort die Frage nicht beantwortet, ist es gut zu wissen, dass dies opacitydie Helligkeit erhöht. ;)