CSSを使用してマウスオーバー時に色を復元してグレースケールを実現するにはどうすればよいですか?

CSS を使用したマウスオーバー時の色復元によるグレースケール

マウスオーバー時の色復元によるグレースケールの外観は、さまざまな方法で実現できます。 、IE と Firefox の両方でブラウザ間の互換性を提供します。

方法 1: 純粋な CSS (単色の画像を使用)

この手法では、ベンダーのフィルター プロパティを利用します。サポートされているすべてのブラウザーで画像をグレースケールするための接頭辞:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8, ..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

方法 2: 純粋な CSS (2 つの画像を使用)

もう 1 つのアプローチには、2 つの画像を使用します。バージョンとカラーバージョン。最初はグレースケール画像が表示され、ホバー状態がカラー画像に移行します。

<code class="css">img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}</code>

<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>

方法 3: CSS フィルターを使用した SVG

IE10 の場合最新のブラウザでは、インライン SVG を使用してフィルターを適用し、グレースケール効果を動的に制御できます:

<code class="css">svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}</code>

<code class="xml"><svg ...>
  <defs>
    <filter id="filtersPicture">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" ... />
</svg></code>

以上がCSSを使用してマウスオーバー時に色を復元してグレースケールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。