Question

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

以下是我想要实现的示例： enter image description here

直到现在我做了什么：

      <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作为您的背景也可以正常工作。

Answer 2

您可以为阴影效果创建透明PNG，然后将其作为背景图像放在div中。然后，您可以将图像添加到该div中，使用css定位。

这个解决方案适用于所有浏览器，即使使用IE6也可以使用透明png。

希望这有帮助。

Answer 3

这是因为该特定浏览器不支持。您可能会遗漏vendor-prefix

Opera 10.50（目前仅适用于Windows）是第一个网络浏览器有一个没有供应商前缀的实现，而 Firefox，Safari和谷歌Chrome目前都需要它。所以，这段代码使其适用于所有这些Web浏览器

.shadow {
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000;
}

此外，您可以参考这些链接

Drop shadow with css for all web browser

Box shadow

Answer 4

这是一种更通用的解决方案，但可能对其他人有用。我将以下内容添加到HTML的<head>部分：

<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>

它为所有图像添加阴影效果很好。

HTML + CSS：如何将阴影（作为图像）添加到图像？

4 个答案: