css3 filter blur effect_html/css_WEB-ITnose

Recently I was working on a CSS3 filter blur effect, but I found that some browsers have no effect at all. This is due to browser compatibility. I am afraid that I will forget it in the future, so I will write it first. Come down, I hope it can help friends in need.

The code is as follows:

div{//Set translucent filter effect

opacity: 0.5;
filter:alpha(Opacity=50);

}

1. Filter: Set a translucent filter effect for IE. filter:alpha(Opacity=50) represents 50% translucence of the object. It supports IE8 and below browsers.
2. Opacity: css3 attribute, supports all browsers except IE including Google, Firefox, IE9 and above.

div{//Set blur filter

-webkit-filter:blur(3px);

-moz-filter:blur(3px );

filter:url(blur.svg#blur);

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

filter: blur(3px);

}

1. The attribute has not yet become part of the W3C standard, so a prefix needs to be added. Currently, only the -webkit-filter:blur(3px) prefix writing method is supported by Chrome browser .

2. Firefox does not support writing -moz-filter:blur(3px) directly. You need to introduce the blur.svg file to achieve the same blur effect as other browsers, and the code in this file It goes like this:

As long as you introduce this file in the css style, it will be ok, import the style The writing method is as follows: filter:url(blur.svg#blur);

3. IE browser can directly write the filter through: filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3' ); But it only supports IE6~IE9.

IE10 and later IE11 all support SVG filters. However, this demo is invalid in these browsers. Why?

It seems that it does not support using filter: url directly in CSS. The specific solution is still under study.