Wie erzielt man browserübergreifende Graustufeneffekte auf CSS-Hintergrundbildern?

Browserübergreifende Lösung zum Überblenden von CSS-Hintergrundbildern in Graustufen

Trotz der Verfügbarkeit des CSS3-Filters bleibt die Anwendung von Graustufeneffekten auf Hintergrundbilder bestehen eine Herausforderung für verschiedene Browser. Die Lösung mit SVG-Filter funktioniert für Safari und Chrome, jedoch nicht für andere Browser.

Um diese Einschränkung zu überwinden, besteht ein alternativer Ansatz darin, Inline-SVG-Code zu verwenden, um einen benutzerdefinierten Filter zu erstellen. Diese Methode ist mit allen modernen Browsern kompatibel, einschließlich IE10 und 11.

Codebeispiel für IE10-11:

<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="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

jQuery-Lösung zum Umschalten des Graustufeneffekts :

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

<code class="html"><div id="image" class="nongrayscale">
  rollover this image to toggle grayscale
</div></code>

<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>

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