我有下面的图片,并在外部样式表中编写了代码,这样当您将鼠标悬停在图片上时,它会创建一个投影,但它只会创建一个框阴影。我使用的代码是:
.Pick:hover {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
我哪里错了?
最佳答案
您的图像需要是透明的 PNG。如果您的图片不透明,则图片周围会显示阴影。
我更新了你的 png,它在这里工作:
.pick:hover {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222); }
<img class="pick" src="http://i.imgur.com/CeYiLOd.png">
为了完成这个,我在 Photoshop 中打开它,并使用魔术棒工具选择图像周围的白色并将其删除。
关于CSS 生成的是框阴影而不是投影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29632885/