.blur { filter: url(blur.svg#blur); /* IE10, IE11 */ -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 */ }
blur.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="wh100"> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> <image filter="url(#blur)" x="0" y="0" width="100%" height="100%" xlink:href="{pic}" alt=""> </svg>
参考: