-1

アルファチャンネル付きの白黒の白い虫眼鏡を表すPNG画像があります。この画像は他の画像の上に重ねられ、背景が半透明で下が見えるようになっています。

虫眼鏡を重ねた画像

その写真にカーソルを合わせると、CSS ごとのテキスト リンクと同様に、赤に変わります。

私はいくつかのオプションを検討しました：

  • 'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D)文字を使用します。これは、広範な Unicode 文字セットをサポートしていない (ますます少ない) クライアントでは機能しません。ただし、動作する場合、モノクロ文字が生成されるとは限りません (Apple の実装では、フルカラーの絵文字です)。
  • この他の同様の質問 で説明されているように、マスクを使用してください。これは、不透明な背景を気にしない場合 (私の場合は不透明ではありません)、または要素の下にあるものを確実に判断できる場合にのみ機能します (そして、かなりハックで醜いです)。

私の現在の解決策は、別の画像を使用して、画像にカーソルを合わせたときに変化する白い虫眼鏡と赤い虫眼鏡を表すことです。それは問題ない解決策ですが、色について気が変わった場合に画像の色を変更するために戻る必要がないように、1 つの色の写真を 1 つだけ持つ方法があるかどうか疑問に思っていました。

私はすでに CSS3 と HTML5 を広範囲に使用しているので、主要な各ブラウザーの最新のイテレーションでサポートされている限り、さらに深く掘り下げてもかまいません。

4

1 に答える 1

0

この上の数字をいじって、色を取得します。

img.magnify:hover {
  filter: hue-rotate(20deg);
  -webkit-filter: hue-rotate(20deg);
  -moz-filter: hue-rotate(20deg);
  -o-filter: hue-rotate(20deg);
  -ms-filter: hue-rotate(20deg);
}

ここにあります - 利用可能なその他のオプション

于 2013-10-27T00:16:40.960 に答える