Круглый фон за прозрачным изображением PNG

Question

У меня есть div, который содержит фоновое изображение размером 64x64.Я бы хотел, чтобы этот div представлял круговую тень или радиальный фон, когда пользователь наводит курсор на div с помощью мыши.

Если я просто задаю div box тень, то тень отбрасывается в квадратную форму.Если я сделаю так, чтобы у div был радиус, тогда мне нужно сделать div больше, чем 64x64, чтобы он не обрезался?

Взгляните на следующий пример, который иллюстрирует то, что я пытаюсь описать: http://jsfiddle.net/rNeaZ/2/

4-й пример (показанный в ссылке выше), в частности, не подходит для того, что я хочу, потому что:

• его размер намного больше, чем мое изображение 64x64
• изображение теперь выглядит как круглая граница, а это не то, чего я хочу;Я за круговой тенью или фоном за ней

Answer 1

Вероятно, будет проще и эффективнее и эффективнее добавить красивую радиальную тень к спрайту изображения и изменить расположение фонаизображение при наведении.

Answer 2

Самое простое решение - добавить соответствующий background-color, но это сработает только тогда, когда вам нужно смещение 0 0, как в вашем примере.

В более общем случае можно создать псевдо-элемент и применить к нему тень и цвет фона.Я могу описать это более подробно, если первая идея не относится к вашему делу.