css3 フィルターぼかし効果_html/css_WEB-ITnose

最近CSS3フィルターのぼかし効果を作っていたのですが、ブラウザによっては全く効果がないことが分かりました。 将来忘れてしまいそうなのでメモしておきます。まず、困っている友達に役立つことを願っています。

コードは次のとおりです:

div{//半透明フィルター効果を設定します

不透明度: 0.5;

不透明度: 0.5;
フィルター: alpha(Opacity=50);

}

1。 IE のフィルター効果、filter:alpha(Opacity=50) は、オブジェクトが 50% 半透明であることを表し、IE8 以下のブラウザーをサポートします。
2. 不透明度: css3 属性は、Google、Firefox、IE9 以降を含む IE を除くすべてのブラウザをサポートします。

div{//ぼかしフィルターを設定します

-webkit-filter:blur(3px);

-moz-filter:blur(3px);

filter:url(blur.svg#blur);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

filter:blur(3px);

}

1. この属性はまだ W3C 標準の一部になっていないため、プレフィックスが必要です追加予定ですが、現在 Chrome ブラウザでは webkit-filter:blur(3px) プレフィックス書き込みメソッドのみがサポートされています。

2. Firefox は、-moz-filter:blur(3px) を直接記述することをサポートしていません。他のブラウザと同じぼかし効果を実現するには、blur.svg ファイルを導入する必要があります。ファイル内のコードは次のとおりです。

このファイルをcss形式で導入すればOKです。導入形式は次のように記述します。

3.IE ブラウジング フィルターを介して直接フィルターを記述するだけです: filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); ただし、IE6 〜 IE9 のみをサポートします。

IE10 以降の IE11 はすべて SVG フィルターをサポートします。ただし、このデモはこれらのブラウザでは無効です。なぜですか?

CSS での filter:url の直接使用はサポートされていないようです。具体的な解決策はまだ検討中です。