我学会了如何从this question的答案中为PNG图像添加阴影。一个名为Dudley的用户发布了这个代码,除了Firefox(以及旧版本的Safari)之外,它对我有用:
.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>
代码基于this article。我添加了代码。除了OffX,OffY和rgb值之外,我原样使用它。另外,我将CSS代码复制到下面显示的CSS的a:hover部分。 (注意:我之后添加了id标签更改以尝试使其工作,但它似乎也没有工作)。
#cssicons > ul > li > a:hover {
color: rgb(255,255,221);
id: shadowed;
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}
HTML看起来像这样(为简洁而截断):
<link href="/icon_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssicons'>
<ul>
<li class='has-sub last'><a href='http://SwingBuffalo.com/'><span><IMG SRC="/images/swingbuffalo-tiny.png" WIDTH="40px" HEIGHT="40px" title="SwingBuffalo.com"></span></a></li>
<li class='has-sub last'><a href='http://RhythmShuffle.onbile.com/'><span><IMG SRC="/images/mobile.png" WIDTH="40px" HEIGHT="40px" title="Mobile Site"></span></a></li>
<li class='has-sub last'><a href='http://www.facebook.com/events/442624375809049/'><span><IMG SRC="/images/fb.png" WIDTH="40px" HEIGHT="40px"></span></a>
<ul>
<li><a href='https://www.facebook.com/sharer/sharer.php?u=www.RhythmShuffle.com&t=Rhythm%20Shuffle'><span>Share</span></a></li>
<li><a href='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FRhythmShuffle.com%2F&send=false&layout=standard&width=450&show_faces=true&font=trebuchet+ms&colorscheme=light&action=like&height=80'><span>Like</span></a></li>
<li><a href='http://www.facebook.com/events/442624375809049/'><span>RSVP</span></a></li>
<li class='last'><a href='http://www.facebook.com/SwingBuffalo/'><span>Swing Buffalo</span></a></li>
</ul>
</li>
...
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
包含代码的页面为here。谁知道我做错了什么?
谢谢, 罗布
答案 0 :(得分:2)
我认为这可能就是答案
目前支持css过滤器的浏览器是Chrome和Safari。
关键是需要filter: url(shadow.svg#drop-shadow);
.shadowed {
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}
#cssicons > ul > li > a:hover {
color: rgb(255,255,221);
id: shadowed;
-webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5));
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2,
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2,
Color='#444')";
}
我将 shadow.svg 作为实际文件,而不是嵌入在html中。
由user2057516发起的提示:如果不起作用,请添加“Content-Type:image / svg + xml”标题
答案 1 :(得分:0)
我会使用box-shadow属性,因为这可以根据您使用的偏移量实现相同的效果。
/* Firefox */
-moz-box-shadow: 3px 3px 4px #000;
/* Webkit browsers */
-webkit-box-shadow: 3px 3px 4px #000;
/* W3C */
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
现在大多数现代浏览器都采用基本的box-shadow属性,而不是使用供应商前缀。只需修改它们,直到获得所需的输出。