css3 frosted glass effect white edge problem_html/css_WEB-ITnose

Note: Many people should know how to achieve the css3 frosted glass effect, but there is a problem. When the image is blurred, it is equivalent to shrinking, so dark-colored images will have white edges. Here Tell me the solution I can refer to online!

1. Frosted glass implementation method:

CSS3 blur filter implementation
The following test code:

.blur {        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    }

The relevant HTML code is as follows:

<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy" / alt="css3 frosted glass effect white edge problem_html/css_WEB-ITnose" ><img  class="blur lazy"  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  / alt="css3 frosted glass effect white edge problem_html/css_WEB-ITnose" >

It should be noted that Firefox does not currently support it. Some other browsers, such as FireFox, do not support it yet. There is no support for CSS3 filter. Of course, it is also possible to achieve the effect of blurring photos on (for example) FireFox 24 browser. You can use the SVG blur filter.
Create a new SVG file named blur.svg:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">	     <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs></svg>

The following CSS calling code:

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

Full css code

.blur {	    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}<strong>2、解决白边方式</strong>相关HTML代码如下：

<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy" / alt="css3 frosted glass effect white edge problem_html/css_WEB-ITnose" >

<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy" / alt="css3 frosted glass effect white edge problem_html/css_WEB-ITnose" >原理很简单就是在要模糊的图片下面在定位一张相同的图片，当要模糊的图片缩小时，就会显示出低下的那张图。。。白边就不见了，哈哈哈。。。你想到了吗？