Wie konvertiert man Hintergrundbilder in verschiedenen Browsern in Graustufen?

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 Bild soll den CSS3-Filter Graustufen anwenden:

-webkit-filter: grayscale(100%);

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

Cross-Browser 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 funktioniert die oben genannte SVG-Filtertechnik 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 einfach in Graustufen umwandeln, Verleihen Sie Ihren Webdesigns eine zeitlose Note und wahren Sie gleichzeitig die browserübergreifende Kompatibilität.

Das obige ist der detaillierte Inhalt vonWie konvertiert man Hintergrundbilder in verschiedenen Browsern in Graustufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!