Question

几天以来，我一直在寻找一种方法，可以轻松地在可以与所有浏览器兼容的图像上应用模糊效果。在我看到很多解决方案之后（webkit但与ie，blur.js和其他脚本不兼容很长，以至于我没有成功运行，算法...）我终于找到了一个神奇的方法来做一点点of 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>或不显示图片。我无法解释这一点，width: 100%是一个不同的标签吗？我找不到关于它的文档，并且在没有作者解释的情况下找到了jsfiddle。

无论如何，我正在尝试使用{{1}}为背景图像设置模糊，图片不会调整大小：http://jsfiddle.net/fu11q8tc/3/

如果有人能解释我，我会感激不尽！

Answer 1

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

话虽如此，要在整个图片中展开图片，您需要关闭图片上的preserveAspectRatio，方法是将其值设置为none：

编辑：增加100％高度

＆＃13;

$(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";
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

这种模糊如何运作

1 个答案: