css - 透明な png 画像の背後にある円形の背景

Question

サイズ 64x64 の背景画像を含む div があります。ユーザーがマウスでdivの上にカーソルを置いたときに、このdivに円形の影または放射状の背景を与えたいと思います。

単純に div にボックスの影を付けると、影が四角形に投影されます。div に半径を持たせる場合、トリミングされないように div を 64x64 よりも大きくする必要がありますか?

私が説明しようとしていることを示す次の例を見てください: http://jsfiddle.net/rNeaZ/2/

特に4番目の例（上記のリンクに表示）は、次の理由で私が求めているものには適していません。

• サイズは私の 64x64 画像よりもはるかに大きいです
• 画像には円形の境界線があるように見えますが、これは私が望むものではありません。私はその背後にある円形の影または背景を求めています

Answer 1

画像スプライトに素敵な放射状の影を追加し、ホバー時に背景画像の位置を変更する方が、おそらく簡単で効果的で効率的です。

Answer 2

最も簡単な解決策は、適切なを追加することbackground-colorですが、それは例のように 0 0 のオフセットが必要な場合にのみ機能します。

より一般的なケースは、疑似要素を作成し、それに影と背景色を適用することです。最初のアイデアがあなたのケースに当てはまらない場合は、これについて詳しく説明できます。