点击图片时,图片会放大并设置为页面的背景,属性为模糊。
我试过下面的代码,..
<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; }
所选图像尚未设置为背景,也未设置模糊属性。
我用过这个link .它仅适用于 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");
您可以找到解决方案 here.
但仍在 IE 中搜索解决方案,Safari 模糊选项将在 Safari6.0 或更高版本上工作。但不幸的是,Windows 版 Safari 已经停产。您可以获得的最新 Safari 版本是 5.1.7。
关于javascript - 放大和模糊 css 中的图像,响应所有浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25279277/