在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;

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

有什么正确的方法吗?

548066 次浏览
小开

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

小开

如果你有>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/目录中。如果你不喜欢生成的阴影，你可以调整参数很多;从阴影文档开始，一般的使用说明有很多可以对图像进行处理的很酷的例子。

如果你在未来改变了你对阴影的外观的想法-这只是一个命令，生成新的图像与不同的参数:-)

小开

在你的类中添加半径边界，如果它是一个块。因为默认情况下阴影将应用于块边界，即使你的图像有圆角。

border-radius: 4px;

改变它的边界半径根据你的你的图像角。

小开

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

没有办法准确地得到图像的轮廓，但你可以在图像后面的中心处设置一个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不透明，让它看起来像透明的，这并不难，你可以评论，我稍后会解释)

小开

有一个提议的功能，你可以使用任意形状的投影。你可以在这里看到，由Lea Verou提供:

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

不过，浏览器支持很少。

小开

有点晚了，但是是的，使用投影过滤器(用于Webkit)， SVG(用于Firefox)和DX过滤器(用于IE)的组合，围绕alpha蒙面png创建“真正的”动态投影是完全可能的。

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

一些比较真正滴影和盒影和一篇关于我刚才描述的技术的文章。

我希望这能有所帮助!

小开

当我只需要“一点”阴影(轮廓不能超级精确)时，我经常使用的一个技巧是在图像下面放置一个DIV，用100%黑到100%透明的径向填充。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 */
}

这将在320x320的DIV上创建一个圆形的黑色淡色“点”，如果你缩放DIV的高度或宽度，你会得到一个相应的椭圆形。非常适合在瓶子或其他圆柱体形状下创建阴影。

这里有一个绝对不可思议的，超级优秀的工具来创建CSS渐变:

http://www.colorzilla.com/gradient-editor/

ps:当你使用它的时候，做一个礼貌的广告点击。(不，我不是它的成员。但是礼貌地点击应该成为一种习惯，特别是对于你经常使用的工具……你……因为我们都在网络上工作…)

小开
也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow < / p > 
img { png-shadow: 5px 5px 5px #222; }
小开

正如Dudley在他的回答中提到的，这是可能的，与dropshadow CSS过滤器的webkit, SVG的Firefox和DirectX过滤器的Internet Explorer 9-。

进一步的一步是内联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')";
}
小开

只要加上这个:

-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);
}
小开

是的，可以使用filter: dropShadow(x y blur? spread? color?)，无论是在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);">

小开

在我的例子中，它必须在现代移动浏览器上工作，使用不同形状和透明度的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/

小开

您不能在所有浏览器上可靠地执行此操作。微软不再支持DX过滤器作为IE10+，所以没有一个解决方案在这里完全工作:

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

唯一能在所有浏览器上可靠工作的属性是box-shadow，它只是把边界放在你的元素上(例如div)，导致一个方形边界:

盒影:horizontalOffset verticalOffset blurDistance spreadDistance颜色 inset;

如。

box-shadow: -2px 6px 12px 6px #CCCED0;

如果你恰好有一个“正方形”但有统一圆角的图像，投影与border-radius一起工作，所以你总是可以在div中模拟图像的圆角。

下面是微软的box-shadow文档:

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

小开

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

< a href = " http://codepen。io / widhi_allan /钢笔/ ltaCq noreferrer“rel = > 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)三个字符是不行的。


提交答案