3

我正在尝试为我的画廊中的每张图片添加一个阴影。我知道我可以为每个元素添加 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 中对我有用。你们能帮我吗，如何在所有浏览器中更有效地执行它？

4

4 回答 4

3

如果您的图像尺寸不规则，那么您正在寻找作为背景图像的 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 作为背景也可以。

于 2012-12-29T20:11:12.487 回答
2

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

这个解决方案适用于所有浏览器，即使是 IE6，如果你让它与透明 png 一起使用。

希望这可以帮助。

于 2012-12-29T18:23:47.917 回答
1

这是因为，该特定浏览器不支持该功能。你可能会失踪vendor-prefix

Opera 10.50（目前仅在 Windows 上可用）是第一个没有供应商前缀的网络浏览器，而 Firefox、Safari 和 Google Chrome 目前都需要它。所以，这段代码使它可以在所有这些网络浏览器中工作

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

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

为所有 Web 浏览器使用 CSS 投影

盒子阴影

于 2012-12-29T18:19:52.637 回答
1

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

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

它非常适合为所有图像添加阴影。

于 2016-11-21T18:53:29.057 回答