4

2 番目の画像ファイルを必要とせずに (または画像の非表示部分を必要とせずに)、カーソルを置いたときにアイコンの外観 (つまり、コントラスト/輝度) を変更する方法はありますか?

4

4 に答える 4

9

CSS を使用した画像の不透明度と透明度に関する有益な情報を次に示します。

不透明度 50% の画像を作成するには、次のようにします。

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

opacity:の部分は Firefox のやり方で、0.0 から 1.0 の間の値です。filter: IE が行う方法で、0 から 100 までの値です。

于 2008-09-13T03:17:12.647 に答える
9

img タグは使用しませんが、background-image css 属性を持つ要素を使用し、ホバー時に background-position を設定します。IE では、:hover セレクターの親要素として「a」タグが必要です。それらは css スプライトと呼ばれます。

CSS スプライトの使用方法を説明する素晴らしい記事です。

于 2008-09-13T03:55:24.537 に答える
6

ここにいくつかのコードがあります。基本的なアイデア: 画像のすべての可能な状態を 1 つの大きな画像に入れ、画像よりも小さい「ウィンドウ サイズ」を設定します。を使用してウィンドウを移動しますbackground-position。

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
<a href="#" id="test">a button</a>

于 2008-09-13T04:12:31.233 に答える
1

ボタンなどの小さな画像で行われることが通常見られる方法では、画像の特定の部分のみが表示されます。次に、画像の多くの状態が大きな画像を構成し、可視ポートの背後に移動します。誰かがコードを持っているときにこれを削除します。

于 2008-09-13T03:13:56.023 に答える