CSS を使用してマウスオーバーで色が変わるグレースケール画像を作成する方法

マウスオーバーによる色変更による CSS グレースケール

クエリ:

最初はグレースケールですが、グレースケールに切り替わる画像を作成します。マウスを上に置くと色が変わります。 IE および Firefox と互換性のある CSS 技術を使用してこれを実装します。

解決策:

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

この方法では CSS フィルターを利用します。グレースケール効果を実現し、ホバー時にフィルターを削除して元の色を表示します:

<code class="css">img.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"></fecolormatrix></filter></svg>#grayscale"); /* 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>

CSS トランジションを備えたインライン SVG:

このアプローチでは、SVG 要素を画像に埋め込み、CSS を適用しますホバー時にグレースケールとカラーの間でフェードするトランジション:

<code class="css">img.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"></fecolormatrix></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease;
  -webkit-backface-visibility: hidden;
}

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

svg {
  background: url(https://image-source.jpg);
}

svg image {
  transition: all .6s ease;
}

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

以上がCSS を使用してマウスオーバーで色が変わるグレースケール画像を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。