HTML+CSS : How to add shadow (as image) to image?

Question

我正在尝试为我图库中的每张图片添加阴影。我知道我可以将 CSS 阴影添加到每个元素，但我试图在我的照片下添加的阴影是从 PSD 布局中获取的，并且具有与 CSS 阴影不同的形状。

这是我想要实现的示例:

到目前为止我做了什么:

      <div style="padding-left: 15px; position:absolute;">
        <img src="avatar.png" alt="" />
        <img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
      </div>

这是一个糟糕的解决方案，更重要的是，它只适用于 Chrome。你们能帮帮我吗，如何在所有浏览器中更有效、更可行地做到这一点？

Answer 1

如果您的图片尺寸不规则，那么您需要使用 SVG 作为背景图片。 Adobe Illustrator ($$$) 或 Inkscape(免费)可用于将异常形状的阴影创建为 SVG 文件。从那里开始，所有必要的就是这个 CSS:

.myImage {
    background: url(myShadow.svg) no-repeat;
    background-size: 100% 100%;
    padding: ? ? ? ?; // the values will have to depend on your bg image
}

可以在这里找到深入的解释:http://designfestival.com/a-farewell-to-css3-gradients/

如果您的图像大小都相同，或者您不关心调整大小时可能出现的任何颗粒感，那么 PNG 作为背景也同样适用。