Wie erreicht man Graustufen-Hintergrundbilder mit CSS-Cross-Browser-Kompatibilität?-CSS-Tutorial-php.cn

Wie erreicht man Graustufen-Hintergrundbilder mit CSS-Cross-Browser-Kompatibilität?

Barbara Streisand

Freigeben： 2024-10-28 17:19:29

Original

793 Leute haben es durchsucht

How to Achieve Grayscale Background Images with CSS Cross-Browser Compatibility?

So erreichen Sie Graustufen-Hintergrundbilder mit CSS-Browserkompatibilität

Das Erstellen eines Graustufen-Hintergrundbilds mit CSS kann aufgrund von Browser-Inkonsistenzen eine Herausforderung sein . Hier ist eine umfassende Lösung, die in verschiedenen Browsern funktioniert:

Methode 1: CSS3-Filter

Mit der CSS3-Filtereigenschaft, insbesondere greyscale(), können Sie einen Graustufeneffekt anwenden zu Hintergrundbildern. Diese Technik wird jedoch nur von modernen Browsern wie Chrome und Safari unterstützt.

Beispiel:

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}</code>

Nach dem Login kopieren

Methode 2: SVG-Filter

Aus Gründen der browserübergreifenden Kompatibilität können Sie einen SVG-Filter verwenden, um Graustufeneffekte zu erzielen. Für diese Methode müssen Sie einen Filter in einem SVG-Dokument definieren und in Ihrem CSS darauf verweisen.

Beispiel:

SVG-Filter:

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

Nach dem Login kopieren

CSS:

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  filter: url(#grayscale);
}</code>

Nach dem Login kopieren

Methode 3: jQuery Toggle

Wenn Sie zwischen Graustufen und Nicht umschalten möchten -Graustufen dynamisch, Sie können jQuery verwenden.

Beispiel:

jQuery:

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

Nach dem Login kopieren

HTML :

<code class="HTML"><div id="image" class="nongrayscale">
  Rollover this image to toggle grayscale
</div></code>

Nach dem Login kopieren

CSS:

<code class="CSS">.grayscale {
  background: url(yourimagehere.jpg);
  -moz-filter: url("data:image/svg+xml;utf8,...");
  -o-filter: url("data:image/svg+xml;utf8,...");
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,...");
}

.nongrayscale {
  background: url(yourimagehere.jpg);
}</code>

Nach dem Login kopieren

IE10-11-Kompatibilität:

Für IE10 und IE11, ein alternativer Ansatz ist die Verwendung eines SVG-Filters mit einem feColorMatrix-Element.

Beispiel:

<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="yourimage.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erreicht man Graustufen-Hintergrundbilder mit CSS-Cross-Browser-Kompatibilität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!