So erstellen Sie Graustufen-Hintergrundbilder mit CSS

In Zeiten lebendiger und dynamischer Webdesigns ist es manchmal notwendig, einen Hauch subtiler Einfachheit zu integrieren. Eine Möglichkeit, dies zu erreichen, besteht darin, Hintergrundbilder in Graustufen zu konvertieren, was einer Website eine klassische oder Vintage-Ästhetik verleihen kann.

Browserübergreifende CSS3-Filter

Der einfachste Ansatz, einen Hintergrund in Graustufen zu skalieren image soll den CSS3-Filter greyscale anwenden:

-webkit-filter: grayscale(100%);

Diese Technik funktioniert jedoch aufgrund von nur in Chrome v.15 und Safari v.6 Einschränkungen der Browserkompatibilität.

Browserübergreifender SVG-Filter

Um browserübergreifende Graustufeneffekte zu erzielen, können Sie SVG-Filter verwenden:

filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

Diese Lösung funktioniert in den meisten gängigen Browsern, einschließlich Firefox, Chrome und Edge.

jQuery-Animation

Wenn Sie den Graustufeneffekt mithilfe von JavaScript dynamisch umschalten möchten, können Sie jQuery verwenden:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

Dieser Code fügt eine Graustufenklasse hinzu und blendet das Bild aus, wenn Sie mit der Maus darüber fahren.

IE10-11-Kompatibilität

In Internet Explorer 10-11 das obige SVG Filtertechnik funktioniert nicht. Stattdessen können Sie einen Entsättigungsfilter verwenden:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

Dieser Filter kann mithilfe des Filterattributs auf Bilder angewendet werden.

Durch die Verwendung dieser Methoden können Sie Hintergrundbilder in CSS ganz einfach in Graustufen umwandeln und so Ihrem Web eine zeitlose Note verleihen Designs unter Beibehaltung der Cross-Browser-Kompatibilität.