当点击图像时,图像应该放大,并设置模糊属性作为页面的背景。
我尝试了下面的代码,…
<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,不适用其他常见浏览器…
给点建议
我很高兴与大家分享这个解决方案。
我尝试了下面的代码在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中寻找解决方案,对于Safari,模糊选项将在Safari6.0或更高版本上工作。但不幸的是,Windows版本的Safari已经停产了。最新的Safari版本是5.1.7。