我需要在一个div上实现模糊效果。我知道在Chrome中可以使用CSS3滤镜,在IE和Firefox中必须使用SVG滤镜。但是我无法理解的是为什么我的SVG滤镜在IE 10+中无法工作,但在Firefox中运行正常?
Demo: http://jsfiddle.net/8pytt/3/
HTML
<div id="container">
<h1>test</h1>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</svg>
CSS
body {
background: blue;
}
#container {
width: 100%;
height: 500px;
text-align: center;
background: blue;
opacity: .8;
background-image: -webkit-radial-gradient(circle farthest-side, white, black);
background-image: -moz-radial-gradient(circle farthest-side, white, black);
background-image: -o-radial-gradient(circle farthest-side, white, black);
background-image: -ms-radial-gradient(circle farthest-side, white, black);
-webkit-filter: blur(5px);
filter:url('#blur');
}
h1 {
color: red;
padding-top: 100px;
}