我有一个PNG图像,它有自由形式(非正方形)。

我需要对这个图像应用阴影效果。

标准的方法……

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... 显示此图像的阴影,就像它是一个正方形一样。所以,我看到我的图像和正方形阴影,它不遵循物体的形式,显示在图像中。

有什么正确的方法吗?


当前回答

也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }

其他回答

当我张贴这原来是不可能的,所以这是解决办法。现在我建议使用其他答案。

没有办法准确地得到图像的轮廓,但你可以在图像后面的中心处设置一个div。

如果我的方法不管用,那你就得把图像切碎,然后对每一个小图像都这样做。(图像越多,阴影看起来越准确) 但是对于大多数图像来说,只用一个img就可以了。

你需要做的是把一个包装div围绕你的img像这样

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

然后你在包装里面放一个空的分隔线(这将作为阴影)

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

然后你必须用CSS使阴影出现在img的后面:

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

现在定位imgWrap来定位原来的img… 为了使img的阴影居中,你可以打乱前两个值 盒子阴影使它们为负.... 或者你可以把img和阴影divs放在绝对的位置 使img的顶部和左侧值= 0 阴影div值分别= img宽度和高度的一半。

如果这看起来很可怕,剪掉你的img,再试一次。

(如果你不想让img后面的阴影只在轮廓上那么你需要让你的img不透明,让它看起来像透明的,这并不难,你可以评论,我稍后会解释)

在我的例子中,它必须在现代移动浏览器上工作,使用不同形状和透明度的PNG图像。我使用图像的副本创建了投影。这意味着我有两个相同图像的img元素,一个在另一个上面(使用position: absolute),后面的一个应用了以下规则:

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

这包括亮度滤镜,以使底部图像变暗,以及模糊滤镜,以投射阴影通常具有的模糊效果。然后使用50%的不透明度来软化它。

这可以应用跨浏览器使用moz和ms标志。

例如:https://jsfiddle.net/5mLssm7o/

这是一个就绪辉光悬停动画代码片段:

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

这对我来说很有效。需要注意的一点是,在IE中,你需要全色(#222222)三个字符是不行的。

这在css中是不可能的——图像是一个正方形,因此阴影将是正方形的阴影。最简单的方法是使用photoshop/gimp或任何其他图像编辑器来应用阴影,如核心绘制。