CSS中PNG图像的投影

问题描述

我有一个 PNG 图像，具有自由形式(非方形).

I have a PNG image, that has free form (non square).

我需要对这张图片应用阴影效果.

I need to apply drop-shadow effect to this image.

标准方法...

-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?

推荐答案

聚会有点晚，但是是的，完全有可能在 alpha 蒙版 PNG 周围创建真正的"动态阴影，使用 dropshadow 的组合 -过滤器(用于 Webkit)、SVG(用于 Firefox)和 DX 过滤器用于 IE.

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.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

真正的阴影和盒子之间的一些比较-阴影 和 一篇关于我刚刚描述的技术的文章.

我希望这会有所帮助！

这篇关于CSS中PNG图像的投影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！