Wie kann ich in CSS eine browserübergreifende Kompatibilität für Graustufen-Hintergrundbilder erreichen?

Graustufen-Hintergrundbilder in CSS

Problem:

Browserübergreifende Unterstützung für das Ausblenden erreichen Die Umwandlung von CSS-Hintergrundbildern in Graustufen bleibt eine Herausforderung. Während der Graustufeneffekt des CSS3-Filters in modernen Browsern wie Chrome und Safari effektiv funktioniert, schlägt er in älteren Browsern wie Firefox, IE und mobilen Browsern fehl.

Lösung:

SVG-Filter verwenden:

Die Lösung besteht in der Verwendung von SVG-Filtern, die einen browserübergreifenden Ansatz zur Anwendung von Farbtransformationen bieten. Bei dieser Technik wird eine Daten-URL mit dem folgenden SVG-Filter erstellt:

<code class="svg"><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">/</feColorMatrix>
</filter>
</svg></code>

Indem wir diesen Filter mithilfe der Filtereigenschaft auf das Hintergrundbild anwenden, können wir einen Graustufeneffekt erzielen:

<code class="css">.grayscale {
  -webkit-filter: grayscale(100%);
  filter: gray;
  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>

Verwenden von jQuery zum dynamischen Umschalten:

Zum dynamischen Umschalten des Graustufeneffekts können Sie jQuery verwenden:

<code class="jquery">$(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>

IE10-11-Kompatibilität:

Für IE10-11 ist aufgrund von Änderungen im Browser-Rendering ein anderer Ansatz erforderlich. Zur Entsättigung kann der folgende SVG-Filter verwendet werden, um einen ähnlichen Graustufeneffekt zu erzielen:

<code class="svg"><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>

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS eine browserübergreifende Kompatibilität für Graustufen-Hintergrundbilder erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!