我需要对div进行模糊效果.我知道对于Chrome我可以使用 CSS3过滤器,对于IE和Firefox,我必须使用SVG过滤器.我无法弄清楚为什么我的SVG过滤器在IE 10中不起作用但在Firefox中工作正常？

演示：http://jsfiddle.net/8pytt/3/

HTML

@H_502_6@<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

@H_502_6@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,black); background-image: -o-radial-gradient(circle farthest-side,black); background-image: -ms-radial-gradient(circle farthest-side,black); -webkit-filter: blur(5px); filter:url('#blur'); } h1 { color: red; padding-top: 100px; }