CSS 中 PNG 图像的阴影
我有一个 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;
显示该图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和方形阴影，它不遵循图像中显示的对象的形式。
有什么办法可以正确地做到这一点吗？
I have a PNG image, that has free form (non square).
I need to apply drop-shadow effect to this image.
The standard approach ...
-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;
... displays shadows for this image, like it is a square. So, I see my image and square shadow, that doesn't follows the form of object, displayed in image.
Is there any way to do it properly?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（15）
当我只需要“一点”阴影（即：轮廓不能太精确）时，我经常使用的一个技巧是在图像下方放置一个径向填充 100% 黑色到 100% 透明的 DIV。 DIV 的 CSS 看起来像这样：
这将在 320x320 DIV 上创建一个圆形黑色淡出“点”。如果缩放 DIV 的高度或宽度，您会得到相应的椭圆形。非常适合在瓶子或其他类似圆柱体的形状下创建阴影。
这里有一个绝对令人难以置信、超级优秀的工具来创建 CSS 渐变：
http://www.colorzilla。 com/gradient-editor/
ps：使用时请礼貌地点击广告。 （而且，不，我不隶属于它。但是礼貌的点击应该成为一种习惯，特别是对于您经常使用的工具......只是说......因为我们都在网络上工作...... ）
A trick I often use when I just need "a little" shadow (read: contour must not be super-precise) is placing a DIV with a radial fill 100%-black-to-100%-transparent under the image. The CSS for the DIV looks something like:
This will create a circular black faded-out 'dot' on a 320x320 DIV. If you scale the height or width of the DIV you get a corresponding oval. Very nice to create eg shadows under bottles or other cylinder-like shapes.
There is an absolute incredible, super-excellent tool to create CSS gradients here:
http://www.colorzilla.com/gradient-editor/
ps: Do a courtesy ad-click when you use it. (And, no,I'm not affiliated with it. But courtesy clicking should become a bit of a habit, especially for tool you use often... just sayin... since we're all working on the net...)
也许您正在寻找这个。
http://lineandpixel.com/blog/png-shadow
Maybe you are in search of this.
http://lineandpixel.com/blog/png-shadow
您无法在所有浏览器上可靠地执行此操作。从 IE10+ 开始，Microsoft 不再支持 DX 过滤器，因此此处的解决方案都不能完全工作：
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
在所有浏览器中可靠工作的唯一属性是
box-shadow，这只是将边框放在元素（例如 div）上，从而产生方形边框：box-shadow: horizontalOffsetverticalOffsetblurDistancespreadDistancecolor inset;
例如，
如果您碰巧有一个“方形”但具有统一圆角的图像，则阴影可与 border-radius 一起使用，因此您始终可以在 div 中模拟图像的圆角。
以下是
box-shadow的 Microsoft 文档：https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
You can't do this reliably across all browsers. Microsoft no longer supports DX filters as of IE10+, so none of the solutions here work fully:
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
The only property that works reliably across all browsers is
box-shadow, and this just puts the border on your element (e.g. a div), resulting in a square border:box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;
e.g.
If you happen to have an image that is 'square' but with uniform rounded corners, the drop shadow works with
border-radius, so you could always emulate the rounded corners of your image in your div.Here's the Microsoft documentation for
box-shadow:https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
是的，可以使用
过滤器： dropShadow(xy 模糊？颜色？)，无论是在 CSS 中还是内联中：Yes, it is possible using
filter: dropShadow(x y blur? color?), either in CSS or inline:虽然有点晚了，但是，是的，使用 dropshadow-filter（适用于 Webkit）、SVG（适用于 Firefox）和适用于 IE 的 DX 过滤器的组合，完全可以在 alpha masked PNG 周围创建“真正的”动态阴影。
真正的 drop-shadow 和 box-shadow 之间的一些比较 和 一篇文章我刚刚描述的技术。
A little late to the party, but yes, it is totally possible to create "true" dynamic drop shadows around alpha masked PNGs, using a combination of dropshadow-filter (for Webkit), SVG (for Firefox) and DX filters for IE.
Some comparisons between true drop-shadow and box-shadow and an article on the technique I've just described.
这对我来说非常有用。需要注意的一件事是，在 IE 中，您需要全彩 (#222222)，三个字符不起作用。
That worked great for me. One thing to note tho in IE you need the full color (#222222) three characters don't work.
如果您想要为超过 100 张图像添加阴影，我建议使用命令行程序 ImageMagick。有了这个，您只需输入一个命令就可以将形状阴影应用于 100 个图像！例如：
上面的（shell）命令获取当前目录中的每个 .png 文件，应用投影，并将结果保存在 Shadow/ 目录中。如果你不喜欢生成的阴影，你可以大量调整参数；首先查看阴影文档，以及一般使用说明 有很多可以对图像执行的操作的很酷的示例。
如果您将来改变了对阴影外观的想法 - 这只是生成具有不同参数的新图像的一个命令:-)
If you have >100 images that you want to have drop shadows for, I would suggest using the command-line program ImageMagick. With this, you can apply shaped drop shadows to 100 images just by typing one command! For example:
The above (shell) command takes each .png file in the current directory, applies a drop shadow, and saves the result in the shadow/ directory. If you don't like the drop shadows generated, you can tweak the parameters a lot; start by looking at the documentation for shadows, and the general usage instructions have a lot of cool examples of things that can be done to images.
If you change your mind in the future about the look of the drop shadows - it's just one command to generate new images with different parameters :-)
正如 Dudley 在他的答案中提到的，这可以通过用于 webkit 的 drop-shadow CSS 过滤器、用于 Firefox 的 SVG 和用于Internet Explorer 9-。
更进一步的是内联 SVG，消除额外的请求：
As Dudley mentioned in his answer this is possible with the drop-shadow CSS filter for webkit, SVG for Firefox and DirectX filters for Internet Explorer 9-.
One step further is to inline the SVG, eliminating the extra request:
如果它是一个块，请在您的类中添加带半径的边框。因为默认情况下阴影将应用于块边框，即使您的图像有圆角。
border-radius: 4px;根据您的图像角更改其边框半径。
希望这有帮助。
Add border with radius in you class if its a block. because by default shadow will apply on block border, even if your image have rounded corner.
border-radius: 4px;change its border radius according to your you image corner.
Hope this help.
只需添加以下内容：
示例：
Just add this:
example:
以下是准备好的发光悬停动画代码片段：
http://codepen.io/widhi_allan/pen/ltaCq< /a>
Here is ready glow hover animation code snippet for this:
http://codepen.io/widhi_allan/pen/ltaCq
当我最初发布此内容时，这是不可能的，因此这是解决方法。现在我只是建议使用其他答案。
没有办法准确地获得图像的轮廓，但你可以在图像后面的中间用一个 div 来伪造它。
如果我的技巧不起作用，那么您必须剪切图像并为每个小图像执行此操作。 （图像越多，阴影看起来就越准确）
但对于大多数图像来说，只用一张图片就可以了。
你需要做的就是在你的img周围放置一个包裹div，
然后你在包裹内放置一个空的分隔符（这将用作阴影）
，然后你必须使用CSS使阴影出现在img后面：
现在位置imgWrap 定位原始图像...
要使 img 的阴影居中，您可以修改前两个值
盒子阴影使它们成为负数......
或者你可以绝对定位img和shadow div
使 img 顶部和左侧值 = 0
阴影 div 值分别 = img 宽度和高度的一半。
如果这看起来很可怕，请剪掉你的图片，然后重试。
（如果你不希望img后面的阴影只是在轮廓上，那么你需要使你的img不透明并使其表现得好像它是透明的，这并不难，你可以发表评论，我稍后会解释）
When i posted this originally it wasnt possible so this is the workaround. Now I simply suggest using other answers.
There is no way to get the outline of the image exactly but you can fake it with a div behind the image in the center.
If my trick doesn't work then you have to cut up the image and do it for every single of the little images. (the more images the more accurate the shadow will look)
but for most images it looks alright with just one img.
what you need to do is to put a wrap div around your img like so
then you put an empty divider inside the wrap (this will serve as the shadow)
and then you have to make the shadow appear behind the img with CSS:
now position the imgWrap to position the original img...
to center the shadow of the img you can mess with the first two values
of the box-shadow making them negative....
or you can position the img and the shadow divs absolutely
making img top and left values = 0
and the shadow div values = half of img width and height respectively.
If this looks horrid cut your img up and try again.
(If you don't want the shadow behind the img just on the outline then you need to make your img opaque and make it act as if it was transparent which is not that hard and you can comment and I'll explain later)
就我而言，它必须能够在现代移动浏览器上运行，并且具有不同形状和透明度的 PNG 图像。我使用图像的副本创建了阴影。这意味着我有同一张图像的两个
img元素，一个位于另一个之上（使用position:absolute），后面的元素应用了以下规则：这包括亮度滤镜，以使底部图像变暗，以及模糊滤镜，以投射阴影通常具有的污迹效果。然后应用 50% 的不透明度以软化它。
这可以使用
moz和ms标志跨浏览器应用。示例： https://jsfiddle.net/5mLssm7o/
In my case it had to work on modern mobile browsers, with a PNG image in different shapes and transparency. I created drop shadow using a duplicate of the image. That means I have two
imgelements of the same image, one on top of the other (usingposition: absolute), and the one behind has the following rules applied to it:This includes brightness filter in order to darken the bottom image, and a blur filter in order to cast the smudgy effect drop shadow usually has. Opacity at 50% is then applied in order to soften it.
This can be applied cross browser using
mozandmsflags.Example: https://jsfiddle.net/5mLssm7o/
有一个建议的功能，您可以使用它来实现任意形状的阴影。你可以在这里看到它，由 Lea Verou 提供：
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
不过，浏览器支持很少。
There's a proposed feature which you could use for arbitrarily shaped drop shadows. You could see it here, courtesy of Lea Verou:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
Browser support is minimal, though.
这对于 css 来说是不可能的 - 图像是正方形，因此阴影将是正方形的阴影。最简单的方法是使用 Photoshop/gimp 或任何其他图像编辑器来应用阴影，如核心绘制。
This won't be possible with css - an image is a square, and so the shadow would be the shadow of a square. The easiest way would be to use photoshop/gimp or any other image editor to apply the shadow like core draw.