css3 frosted glass effect white edge problem_html/css

css3 frosted glass effect white edge problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:01:20

Original

1433 people have browsed it

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);    }

Copy after login

The relevant HTML code is as follows:

<img src="mm1.jpg" /><img src="mm1.jpg" class="blur" />

Copy after login

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>

Copy after login

The following CSS calling code:

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

Copy after login

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代码如下：

Copy after login

<img src="mm1.jpg" />

Copy after login

<img src="mm1.jpg" />原理很简单就是在要模糊的图片下面在定位一张相同的图片，当要模糊的图片缩小时，就会显示出低下的那张图。。。白边就不见了，哈哈哈。。。你想到了吗？

Copy after login