Wie erstelle ich browserübergreifende Graustufeneffekte für CSS-Hintergrundbilder?

Browserübergreifende Graustufen für CSS-Hintergrundbilder

Hintergrundbilder können einer Webseite Tiefe und visuelles Interesse verleihen, aber manchmal ist es wünschenswert, sie zu präsentieren sie in einem entsättigten oder Graustufenformat. Während die Eigenschaft filter: greyscale() von CSS3 diesen Effekt in modernen Browsern wie Chrome und Safari erzielen kann, fehlt ihr in früheren Versionen die Unterstützung. Um diese Einschränkung zu überwinden, ist eine browserübergreifende Lösung erforderlich.

Filter-Fallback:

Ein Ansatz besteht darin, die Eigenschaft filter: url() mit einem Inline-SVG zu verwenden Filter, der die Graustufenkonvertierung definiert. Diese Technik funktioniert auf den meisten Browsern, einschließlich Firefox, IE und Edge:

<code class="css">.grayscale {
  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");
}</code>

Der bereitgestellte SVG-Filter definiert eine Farbmatrix, die jeden Farbkanal in 33,33 % seines Originalwerts umwandelt und so effektiv einen Graustufeneffekt erzeugt .

jQuery-Umschaltung:

Wenn eine dynamische Graustufenumschaltung gewünscht wird, kann jQuery genutzt werden, um den Graustufenfilter auf Mouseover- und Mouseout-Ereignisse anzuwenden und zu entfernen:

<code class="javascript">$(document).ready(function () {
  $("#image").mouseover(function () {
    $(".nongrayscale").removeClass().fadeTo(400, 0.8).addClass("grayscale").fadeTo(400, 1);
  });
  $("#image").mouseout(function () {
    $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
  });
});</code>

Dieses Skript schaltet den Graustufeneffekt auf dem Bild mit einer sanften Ein- und Ausblendanimation um.

SVG-Entsättigung:

In neuerer Zeit In den IE-Versionen (10–11) funktionieren die oben genannten Lösungen möglicherweise aufgrund von Änderungen in ihrer SVG-Implementierung nicht. Für diese Browser kann ein alternativer SVG-basierter Ansatz verwendet werden, um das Bild zu entsättigen:

<code class="html"><svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image xlink:href="your_image.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

Diese Methode wandelt das Bild in Graustufen um, indem der Sättigungswert der Farbmatrix auf 0 gesetzt wird.

Das obige ist der detaillierte Inhalt vonWie erstelle ich browserübergreifende Graustufeneffekte für CSS-Hintergrundbilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!