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

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

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

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

不透明度: 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 ファイルを導入する必要があります。ファイル内のコードは次のとおりです。