Wie man erstellt: Fügen Sie Bildeffekte hinzu

Erfahren Sie, wie Sie visuelle Effekte zu Bildern hinzufügen.

Bildeffekte

Selbst ausprobieren

CSS-Filter

CSS filter Diese Eigenschaft fügt dem Element visuelle Effekte hinzu (z.B. Unschärfe und Sättigung).

Hinweis:Internet Explorer, Edge 12 oder Safari 5.1 und frühere Versionen unterstützen diese Eigenschaft nicht. filter Eigenschaft.

Beispiel für Graustufen

Ändern Sie die Farben aller Bilder in Schwarzweiß (100% Graustufen):

Tulip
Ursprüngliches Bild
Tulip
Graustufen (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Selbst ausprobieren

Beispiel für Bildunschärfe

Verwenden Sie dieunschärfen Bearbeitung für alle Bilder:

Tulip
Ursprüngliches Bild
Tulip
Bilderunschärfe (5 Pixel)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Selbst ausprobieren

Verwandte Seiten

Referenzhandbuch:CSS Filter-Eigenschaft