Javascript 在css中缩放和模糊图像，以响应所有浏览器

单击图像时，图像应放大并设置为具有模糊属性的页面的背景

我尝试了以下代码

<style type="text/css">
body{
position: absolute;
margin-left: 100px;
right: 0;
 z-index: 99999;
  display: block;
  background: url(music_album_img/images8.jpg);
  width: 100%;
  height: 100%;  
  -webkit-filter: blur(75px);
  -moz-filter: blur(50px);
  -o-filter: blur(75px);
  -ms-filter: blur(75px);
  filter: blur(75px);
}

所选图像未设置为背景，也未设置模糊属性

我用过这个。它只适用于Chrome和Opera，不适用于其他普通浏览器

---

给出一些建议

我很高兴与大家分享这个解决方案

我在firefox中尝试了以下过滤器选项代码以获得解决方案

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'effect-blur-1\'><feGaussianBlur stdDeviation=\'15\' /></filter></svg>#effect-blur-1");

filter:url（“数据：image/svg+xml；utf8，#effect-blur-1”）；

你可以找到解决办法

---

但是仍然在IE中搜索解决方案，对于Safari模糊选项将在Safari6.0或更高版本上工作。但不幸的是，SafariforWindows已经停产。您可以获得的最新Safari版本是5.1.7。

我们无法使用css设置内容模糊的图像…我们可以设置它，我想为IE中不支持的所有浏览器动态和响应地设置图像。

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'effect-blur-1\'><feGaussianBlur stdDeviation=\'15\' /></filter></svg>#effect-blur-1");