放大和模糊CSS中的圖像具有對所有瀏覽器的響應

Question

單擊圖像時，圖像應放大並設置為具有模糊屬性的頁面的背景。

我嘗試了以下代碼，..

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

在這里，我將圖像的寬度和高度設置為100％。

 .mi {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}
#background-image, #background-image span { 
    background: #fff url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    height: 220px; 
    width: 320px; 
    position: relative;
}
#background-image span { 
    background-position: 0 -220px; 
    opacity: 0;
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1;
  -webkit-transition: opacity 0.3s ease-out; 
     -moz-transition: opacity 0.3s ease-out; 
      -ms-transition: opacity 0.3s ease-out; 
       -o-transition: opacity 0.3s ease-out; 
          transition: opacity 0.3s ease-out;
           opacity: 1;

}
#background-image:hover span { opacity: 1; }

所選圖像尚未設置為背景，並且“模糊”沒有設置任何屬性。

我已經使用了此鏈接 。 它僅適用於Chrome和Opera，不適用於其他常見的瀏覽器...

給一些建議

Answer 1

我很高興與大家分享這個解決方案。

我在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");

您可以在此處找到解決方案。

但仍在IE中搜索解決方案，並在Safari6.0或更高版本上可以使用Safari模糊選項。 但是不幸的是，Windows版的Safari已停產。 您可以獲得的最新Safari版本是5.1.7。