1


IE8 で、RGBA 背景とボックス シャドウの両方を div に適用した場合の効果を模倣しようとしています。不透明な背景を設定すると、Microsoft の「Shadow」フィルターを使用してボックス シャドウ効果をうまく実現できます。背景を「透明」に設定すると、「グラデーション」フィルターを適用して RGBA 背景を取得できます。しかし、そのように両方のフィルターを組み合わせようとすると、

div#translucentBG {
  zoom       : 1;
  background : transparent;

  filter: 
    progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#80464646, EndColorStr=#80464646),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=0),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=90),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=180),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=270);
}

div には正しいボックスの影が付きますが、背景は不透明です #464646 。すべてのシャドウ フィルターを削除するだけで、魔法のように div が再び半透明になります。これはかなりイライラします。IE は両方の効果を完全に別々にレンダリングするので、それらを組み合わせたときになぜ失敗するのか想像できません。おそらく回避策や代替方法が利用できることはわかっていますが、私が本当に興味を持っているのは、上記の手法が失敗する理由です。

4

1 に答える 1

3

説明

私は人々が効果を見るためにこのフィドルを設定しました（もちろんIE8で）。

その理由は、グラデーションが「塗りつぶし」値として登録されているためだと思います。そうすると、ドロップ シャドウ自体がその後ろの塗りつぶしになります。これは、実際には、おそらく求めている透明度を奪っています (つまり、それは transparentであり、下のドロップ シャドウ( opaqueであり、背景を覆い隠している) に透けて見えるだけです)。「影」への塗りつぶしがない場合、ドロップ シャドウが適用されないため、私の例の最後のdivフィドルがまったく「表示」されていないことに注意してください。

ドロップ シャドウが実際にグラデーションの後ろに塗りつぶされていることは、このフィドルの最後のように a だけが適用されると、ドロップ シャドウが div にも「入る」という事実によってさらにサポートされborderます。したがって、影は、オブジェクトの塗りつぶしの下を塗りつぶさない単なる「エッジ」プロパティではありません。div

ボックスシャドウ比較

このフィドルは実装を示していbox-shadowます。

の仕様は、IEフィルターbox-shadowで見られる動作とは異なることに注意してください。エッジ プロパティであるため、「エッジプロパティShadowのように機能する FF/Chrome の box-shadow プロパティの動作に惑わされた」わけではありません。(ええと、IE フィルターが同じように機能すると思い込んでいたのかもしれません。)キーワードが定義の一部でない限り、ボックス自体の背後には入力されません(その場合、内部のみが入力されます)。仕様には次のように書かれています（強調を追加）：insetbox-shadow

外側の box-shadowは、要素の border-box が opaque であるかのように影を落とします。影はボーダー エッジの外側にのみ描画されます。要素のボーダー ボックスの内側でクリップされます。

これはまさに FF/Chrome で見られるものです。IE フィルターはかなり前box-shadowから存在しており、その実装方法は明らかに異なっていました。上記の引用で、要素が不透明であるかのように扱われることも強調したことに注意してくださいbackground: transparent。Shadowこれも IEフィルターとは異なります。

于 2012-07-04T00:08:20.180 に答える