2012-07-26 24 views
10

CSSを使用してIEで2つの異なるフィルタを適用することが可能であるかどうかは不思議です。 したがって、私は透明なPNGを使用する必要がありますまたdivにいくつかの不透明度。両方を使うことは可能ですか?IEの複数のCSSフィルタ

マイ透明メーカーのラインは次のようになります。

li.item .item-texture { 
    background: none transparent scroll repeat 0% 0% !important; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ie/articles/item-content-hov.png', sizingMethod='scale') !important; 
} 

私は1つの以上のライン(filter: alpha(opacity=50);)とカンマ(.. 'scale') !important, alpha(opacity=50);)と別のフィルタを追加しようとしましたが、それは無用でした。

+0

回答は間違っている...第二の回答を参照してください... – MonteCristo

答えて

7

IEは最後のフィルタプロパティのみを有効にするため、1つ以上のフィルタプロパティを設定することはできません。

NOTE:これは私は、これはあなたが唯一の1 filterプロパティを使用することができるだけであること、あなたが複数のフィルタを適用することはできませんという意味ではありませんことを明確にしたかったいくつかのダウンの票を得ているように見えるので。複数のフィルタを適用して複数のプロパティに分割しようとすると、最後のフィルタのみが有効になります。

MSDNからは、次の資料によると、これらはコンマが、スペースでない区切られています。http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

はまた、いくつかのIEのフィルタが(アルファを含む)を正しく適用するために、レイアウトを持っている要素を必要とすることに注意してください:http://www.satzansatz.de/cssd/onhavinglayout.html

+2

だから、それはまだ...の一片(だ: –

15

申し訳ありませんが、上記の回答は正しくありません。 に複数のフィルタを適用できますが、1つ以上のスペースで区切る必要があります。

スペースの前のカンマも閉じますが、それは閉じ括弧の後にのみ表示されます。したがって、grayなどのパラメータを持たないIE 4.0フィルタは、この場合動作しません。セパレータとしてのみスペースに拘束するのがベストです。

上記のリンク:http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspxをクリックしてfollowing example link(もちろんIE)をクリックすると、回転とぼかしの両方が2番目の画像に適用されます。 「ソースの表示」から、イメージタグは以下のとおりです。

<img id=image2 src="/workshop/samples/author/dhtml/graphics/sample.jpg" 
    style="filter:progid:DXImageTransform.Microsoft.Blur(strength=50), 
        progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)" 
    height="165px" width="256px" border="0" alt="ocean beach"> 

私はやや成功しIE7でのボックスシャドウの「スプレッド」と8(成功したが、あなたはそれが見えどのように考えるか許容にもよるが)、使用をシミュレートしています:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=0) 
     progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=90) 
     progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=180) 
     progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=270); 

divのすべての辺から影が広がるようにします。グラデーションを含むdivにも影を組み合わせました。しかし、すべてがそれ自体の危険なしに来るわけではありません。上記の場合、影にはレイアウトがあり、そのサイズに合わせて余白を調整する必要があります。また、IEがIEの場合、これらのフィルタの組み合わせによって意図しない結果が生じ、回避策の策定、アプローチの放棄、髪の毛の引き抜きにつながる可能性があります。

質問の元の例では、複数のフィルタをリストすると、前のフィルタは他のCSSプロパティと同様に、後のフィルタによって上書きされます。 2番目の例では、スタイルの最後に "!important"を完全に入れる必要があります。あるいは、CSSのブロック全体が間違って書式設定されているため、破棄されます。 (実際には、!重要なことは完全に放棄する必要があります。サードパーティのコードを開発していて、他の人からタグを守る必要がある場合は、 。あなたのスタイルが意図せずにオーバーライドされている場合は、より具体的な宣言が必要です)。

+0

うん@グレッグ、あなたは正しいです:) – nerdess

+0

@グレッグ、あなたがしていますグレート:)それは私のために働く。 – user2142786

+2

Internet Explorer 8では、フィルタを使用している場合、スペースは機能しません。カンマが必要になります。 –

0

コンマは無視されます。複数のフィルタを貼り付けるには、空白や改行が必要です。あなたが選択した

progid:xxx progid:yyy/works 

progid:xxx, progid:yyy/works 

progid:xxx 
progid:yyy/works 

progid:xxx,progid:yyy/will not work