[英]Zoomin and Blur the image in css With responsive to all Browsers
单击图像时,图像应放大并设置为具有模糊属性的页面的背景。
我尝试了以下代码,..
<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中搜索解决方案,并在Safari6.0或更高版本上可以使用Safari模糊选项。 但是不幸的是,Windows版的Safari已停产。 您可以获得的最新Safari版本是5.1.7。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.