0

我从这个问题的答案中学会了如何为 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>

代码基于这篇文章。我添加了代码。我按原样使用它，除了 OffX、OffY 和 rgb 值的值。此外，我将 CSS 代码复制到了 CSS 的 aa: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>

包含代码的页面在这里。有人知道我在做什么错吗？

谢谢，罗伯

4

2 回答 2

2

我想这可能是答案

css-filters 浏览器支持

目前支持 css-filters 的浏览器是 Chrome 和 Safari。

更新#1

它适用于火狐

关键是这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”标头

于 2013-02-11T16:08:02.307 回答
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 属性，而不是使用供应商前缀。只需修改这些，直到获得所需的输出。

于 2013-02-11T16:13:53.817 回答