it-swarm.com.de

Abdunkeln eines Bildes mit CSS (in beliebiger Form)

Ich habe also viele Möglichkeiten gesehen, Bilder mit CSS zu verdunkeln, auch solche mit abgerundeten Ecken, aber mein Problem ist anders.

Nehmen wir an, ich habe ein .png-Bild, das wie ein kleiner Hund aussieht (gehen Sie einfach mit, ich habe keine guten Beispiele). Wenn ich es auf meiner Seite platziere, gebe ich der Größe 100 x 100.

Aber ich kann nicht einfach etwas darauf legen oder das gesamte Bild einfärben, da dadurch auch der Hintergrund des Hundes eingefärbt wird, was hässlich wirkt.

Kann man mit CSS ein beliebiges Bild färben?

(Ich gehe davon aus, dass Sie meinen Standpunkt verstehen, und unnötiger Code ist nicht erforderlich.)

Vielen Dank!

24
Josiah

Sie können die Deckkraft des Bildes jederzeit ändern, da dies aufgrund der Schwierigkeit von Alternativen die beste Lösung ist.

CSS:

.tinted { opacity: 0.8; }

Wenn Sie sich für eine bessere Browser-Kompatibilität interessieren, schlage ich Folgendes vor:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

Wenn Sie entschlossen genug sind, können Sie dies bereits ab IE7 (wer wusste!) Zum Laufen bringen.

Hinweis: Wie JGonzalezD unten erläutert, dunkelt das Bild nur dann wirklich, wenn die Hintergrundfarbe im Allgemeinen dunkler als das Bild selbst ist. Diese Technik kann zwar immer noch nützlich sein, wenn Sie das Bild nicht ausdrücklich dunkler machen möchten, sondern aus Schwebezustand/Fokus/anderem Status aus irgendeinem Grund hervorheben möchten.

21
Sean

Einfach wie

img {
  filter: brightness(50%);
}
89
The Whiz of Oz

Ich würde ein neues Bild von der Silhouette des Hundes (schwarz) machen und den Rest genauso wie das Originalbild. Fügen Sie in der HTML-Datei ein Wrapper-Div mit dieser Silhouette als Hintergrund hinzu. Machen Sie das Originalbild nun halbtransparent. Der Hund wird dunkler und der Hintergrund des Hundes bleibt gleich. Sie können Folgendes tun: Hover-Tricks, indem Sie die Deckkraft des Originalbilds im Hover auf 100% setzen. Dann springt der Hund heraus, wenn Sie mit der Maus über ihn fahren!

stil

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}

<div class="wrapper">
  <div class="img">
    <img src="original.png">
  </div>
</div>
2
JSSR

Webkit only solution

Solução rápida, depende da propriedade -webkit-mask-image . -webkit-mask-image definiert das Bild für ein Element.

Existem algumas dicas com este método:

  • Obviamente, só funciona em navegadores Webkit
  • Erfordert einen zusätzlichen Wrapper für das Element :after (Tags IMG não podem ter :before/:after pseudo elements, grr)
  • Weitere Wrapper, die Sie nicht kennen, verwenden Sie ein funktionsfähiges CSS, das für eine URL mit dem Tag IMG, portanto, ela é codificada no CSS separadamente attr(…) verwendet wird.

Sie sehen, wie viel Probleme Sie haben, und wie viel Sie tun müssen. Die SVG-Datei wird als Lösungsserie für die Leinwand angezeigt und bietet eine Vielzahl von Optionen (SVG kann auch für Android 2.x verwendet werden).

0
thirdender

wenn Sie möchten, dass nur background-image beeinflusst wird, können Sie dazu einen linearen Farbverlauf verwenden.

  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);

Wenn Sie es dunkler haben möchten, erhöhen Sie den Alpha-Wert. Wenn Sie es heller haben möchten, verringern Sie den Alpha-Wert

0
Arthur Serafim