在CSS中为PNG图像投影

Question

我有一个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;

...显示此图像的阴影,就像它是一个正方形.所以,我看到我的图像和方形阴影,不符合对象的形式,显示在图像中.

有没有办法正确地做到这一点？

Answer 1

派对有点晚了,但是,完全有可能在alpha遮罩的PNG周围创建"真正的"动态阴影,使用了Drophadow-filter(用于Webkit),SVG(用于Firefox)和用于IE的DX过滤器.

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

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

我希望这有帮助!

Answer 2

对的,这是可能的.请在CSS中为您的图像编写以下代码:

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

或者只使用内联样式:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

文档:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()

Answer 3

如果您想要有100个以上的阴影图像,我建议使用命令行程序ImageMagick.有了这个,您只需键入一个命令即可将形状阴影应用于100个图像!例如:

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

上面的(shell)命令获取当前目录中的每个.png文件,应用投影,并将结果保存在shadow /目录中.如果你不喜欢生成的阴影,你可以调整很多参数; 首先查看阴影文档,一般使用说明中有许多可以对图像做的很酷的例子.

如果您将来改变关于阴影外观的想法 - 这只是生成具有不同参数的新图像的一个命令:-)

Answer 4

正如Dudley在他的回答中提到的那样,可以使用针对webkit的drop-shadow CSS过滤器,针对Firefox的SVG和针对Internet Explorer 9的DirectX过滤器.

更进一步的是内联SVG,消除了额外的请求:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<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>#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')";
}

Answer 5

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

这对我来说很有用..有一件事要注意,你需要全彩色(#222222)三个字符不起作用.

Answer 6

如果是块,则在类中添加带半径的边框.因为默认情况下阴影将应用于块边框,即使您的图像有圆角.

border-radius: 4px;

根据您的图像角改变其边框半径.希望这有帮助.

Answer 7

只需添加:

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 

例:

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}

Answer 8

这是准备好的辉光悬停动画代码片段:

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

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

Answer 9

这对于 css 来说是不可能的 - 图像是正方形，因此阴影将是正方形的阴影。最简单的方法是使用 Photoshop/gimp 或任何其他图像编辑器来应用阴影，如核心绘制。