投影在PNG图像的CSS
我有一个PNG图像，有自由forms（非方形）。
我需要将阴影效果应用于此图像。
标准的方法…
-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; …为这个图像显示阴影，就像是一个正方形。 所以，我看到我的形象和方形的影子，不符合形象地展示在图像中。
有什么办法可以做到吗？
晚了一点，但是，是的，这完全有可能创build“真实”的dynamic阴影周围阿尔法屏蔽PNGs，使用dropshadowfilter（用于Webkit），SVG（用于Firefox）和DXfilter的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中为图片编写以下代码：
img { -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222); }
或者只是使用内联样式：
<img src="your-image-source" 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（）;
如果你有> 100个图像，你想有阴影，我会build议使用命令行程序ImageMagick 。 有了这个，只需input一个命令就可以将形状阴影应用于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 /目录中。 如果你不喜欢生成的阴影，你可以调整参数很多; 首先查看阴影的文档 ，一般的使用说明有很多可以对图像进行处理的很酷的例子。
如果您在将来关于阴影的外观改变主意 – 这只是一个用不同参数生成新图像的命令:-)
正如Dudley在他的回答中提到的，这可以通过webkit的下拉式CSSfilter，Firefox的SVG和Internet Explorer 9的DirectXfilter来实现。
更进一步的是内联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')"; }
如果其中有一个块，则在类中添加具有半径的边界。 因为默认情况下，即使图像有圆angular，阴影也会应用于块边框。
border-radius: 4px;
根据你的图像angular改变它的边界半径。 希望这个帮助。
只需添加这个：
-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); }
现在不可能使用CSS。 见build议http://lineandpixel.com/blog/png-shadow
这里是准备发光hoveranimation代码片段：
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); }
这对我来说很好。有一件事需要注意，你需要全色（＃222222）三个字符不起作用。
没有办法准确地得到图像的轮廓，但是可以用中间图像背后的div来伪造它。
如果我的伎俩不起作用，那么你必须削减图像，并为每一个小图像做。 （越多的图像越精确的阴影将看起来），但对于大多数图像看起来只有一个img好。
你需要做的就是像你这样在你的img上放一个换行div
<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的阴影为中心，您可以将box-shadow的前两个值混淆为负值….或者您可以将img和shadow div绝对定位使img的左上angular值和右下angular值分别为img的宽度和高度的一半。
如果这看起来可怕的削减你的IMG了，再试一次。
（如果你不想要img背后的阴影只是在轮廓上，那么你需要使你的img不透明，并使它的行为，如果它是透明的，这不是很难，你可以评论，我会稍后解释）
有一个build议的function，您可以使用任意形状的阴影。 你可以在这里看到，由Lea Verou提供：
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
尽pipe浏览器支持是最小的。
这不可能与CSS – 一个图像是一个正方形，所以阴影将是一个正方形的阴影。 最简单的方法是使用Photoshop / GIMP或任何其他图像编辑器应用像核心绘制阴影。
当我只需要“一点点”阴影（阅读：轮廓不能是超精确的）时，我经常使用的一个技巧就是在图像下面放置一个径向填充100％ – 黑到100％透明的DIV。 DIV的CSS看起来像这样：
.shadow320x320{ background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
这将在320×320 DIV上创build一个圆形的黑色渐变“点”。 如果您缩放DIV的高度或宽度，则会得到相应的椭圆。 在瓶子或其他圆柱形状下创build阴影非常好。
这里有一个绝对令人难以置信的，超级优秀的工具来创buildCSS渐变：
http://www.colorzilla.com/gradient-editor/
ps：当你使用它时，做一个礼貌的广告点击。 （不，我不隶属于它，但礼貌点击应该成为一个习惯，尤其是对于你经常使用的工具…只是说…因为我们都在网上工作… … ）
也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
在我的情况下，它必须在现代移动浏览器上工作，使用不同形状和透明度的PNG图像。 我使用图像的副本创build了投影。 这意味着我有两个相同图像的img元素，一个在另一个之上（使用position: absolute ），后面的元素应用了以下规则：
.image-shadow { filter: blur(10px) brightness(-100); -webkit-filter: blur(10px) brightness(-100); opacity: .5; }
这包括亮度filter以使底部图像变暗，以及模糊filter，以便投射通常具有的污浊效果的投影。 然后应用50％的不透明度以软化它。
这可以应用跨浏览器使用moz和ms标志。
例如： https ： //jsfiddle.net/5mLssm7o/
您无法在所有浏览器中可靠地执行此操作。 微软不再支持IE10 +以上的DXfilter，所以这里的解决scheme都不能完全工作：
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
在所有浏览器box-shadow唯一可靠的属性是box-shadow ，这只是将边框放在元素上（例如div），从而产生一个方形边框：
box-shadow： horizontalOffset verticalOffset blurDistance spreadDistance color inset;
例如
box-shadow: -2px 6px 12px 6px #CCCED0;
如果您碰巧有一个“正方形”但具有统一的圆angular的图像，则投影与border-radius ，因此您始终可以在div中模拟图像的圆angular。
以下是有关box-shadow的Microsoft文档：
https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
