html - 这种模糊是如何工作的

Question

几天以来，我一直在寻找一种方法来轻松地在可以与所有浏览器兼容的图像上应用模糊。在我看到很多解决方案后(webkit 但与 ie、blur.js 和其他脚本不兼容，我没有成功运行，算法...)我终于找到了一个神奇的方法来完成它，只需要一点点html 和 css:http://jsfiddle.net/jamygolden/yUG5U/2/light/

<style>
#svg-image-blur { height: 220px; width: 320px; }
    #svg-image { filter:url(#blur-effect-1); }

</style> 
<svg id="svg-image-blur">
    <image x="10" y="10" id="svg-image" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg> 

但问题是，当我输入 <img> 时，我不明白它是如何工作的它不起作用，我必须做一个 <image>然后指定尺寸并替换 src通过 xlink:href否则它不会显示图像。我无法解释这个，是 <image>不同的标签？我找不到关于它的文档，在没有作者解释的情况下找到了 jsfiddle。

无论如何，我正在尝试使用 width: 100% 为背景图像设置模糊效果。 ，图像未调整大小:http://jsfiddle.net/fu11q8tc/3/

如果有人能解释我，我将不胜感激!

Answer 1

正如我在评论中所说，SVG(可缩放矢量图形)是 HTML/CSS 之上的另一层；这确实是一种完全不同的技术，这就是元素和属性不同的原因。正如模糊所证明的那样，它非常强大，甚至还有一个名为 Inkscape 的编辑器。创建可嵌入 HTML 中的 SVG 代码。

话虽这么说，要在整个图像上拉伸(stretch)图像，您需要关闭图像上的 preserveAspectRatio，方法是将其值设置为 none:

编辑:添加 100% 高度

$(document).ready(function(){
  var img = new Image();
  $(img).load(function(){
     var aspectRatio = this.naturalWidth/this.naturalHeight;
     $("#svg-image-blur").css("height", window.innerWidth/aspectRatio);
     console.log(aspectRatio);
  });
  //img.src = "http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg";
  img.src = "http://img4.sizeis.com/photos/banana.jpg";
 });

html, body {
    width: 100%;
    height: 100%;
}
#svg-image-blur { width: 100%; overflow: visible; height: 100% }
    #svg-image { filter:url(#blur-effect-1); }

#background-content {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
    height: 340px;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-content" >					
	<svg id="svg-image-blur">
		<image id="svg-image" preserveAspectRatio="none" width="100%" height="100%" id="svg-image" xlink:href="http://img4.sizeis.com/photos/banana.jpg" />
		<filter id="blur-effect-1">
		    <feGaussianBlur stdDeviation="8" />
		</filter>
	</svg>  
</div>