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のaa：hoverセクションにCSSコードをコピーしました。（注：後で機能させるために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

Firefoxで動作します

ポイントはそれ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')";
}

htmlに埋め込まれていない実際のファイルとしてshadow.svgがあります。

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 に答える