图像模糊跨浏览器不适用于 safari、opera 和 ie

Question

我有这个代码：

Js：

<script src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("img").css({
        "filter": "url(#example-one)", 
        "-webkit-filter": "blur(4px)", 
        "-moz-filter": "blur(4px)",
        "-o-filter": "blur(4px)",
        "-ms-filter": "blur(4px)"

    });
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-two)", 
            "-webkit-filter": "blur(3px)", 
            "-moz-filter": "blur(3px)",
            "-o-filter": "blur(3px)",
            "-ms-filter": "blur(3px)"

        });
    }, 3000);
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-three)", 
            "-webkit-filter": "blur(2px)", 
            "-moz-filter": "blur(2px)",
            "-o-filter": "blur(2px)",
            "-ms-filter": "blur(2px)"

        });
    }, 3100);
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-four)", 
            "-webkit-filter": "blur(1.5px)", 
            "-moz-filter": "blur(1.5px)",
            "-o-filter": "blur(1.5px)",
            "-ms-filter": "blur(1.5px)"

        });
    }, 3200);
    window.setTimeout(function() {
        $("img").css({
            "filter": "url(#example-five)", 
            "-webkit-filter": "blur(1px)", 
            "-moz-filter": "blur(1px)",
            "-o-filter": "blur(1px)",
            "-ms-filter": "blur(1px)"


        });
    }, 3300);
    window.setTimeout(function() {
        $("img").css({
            "filter": "", 
            "-webkit-filter": "", 
            "-moz-filter": "",
            "-o-filter": "",
            "-ms-filter": ""

        });
    }, 3400);
    $("#promoIMG").fadeIn(5000);
});

HTML：

<div id="page">

    <div id="promoIMG">
        <a href="main.php"><img src="images/akb1.png" alt="" onMouseOver="this.src='images/akb2a.png'" onMouseOut="this.src='images/akb1.png'"/></a><br/>
        <img src="images/akb2.png" alt="AKB" />

    </div>

    <svg height="0" xmlns="http://www.w3.org/2000/svg">

        <!-- Filter ID/Name -->
        <filter id="example-one">

            <!-- Amount of Gaussian Blur that should be applied -->
            <feGaussianBlur stdDeviation="4"/>

        </filter>
        <filter id="example-two">
            <feGaussianBlur stdDeviation="3"/>
         </filter>
         <filter id="example-three">
            <feGaussianBlur stdDeviation="2"/>
         </filter>
         <filter id="example-four">
            <feGaussianBlur stdDeviation="1.5"/>
         </filter>
         <filter id="example-five">
            <feGaussianBlur stdDeviation="1"/>
         </filter>
    </svg>
    </div>

Tt 在 chrome 和 mozilla firefox 中运行完美，但是当我尝试在 safari、opera 和 IE 上运行时，图像模糊动画不起作用。

我的代码有问题吗？还是 safari、opera 和 IE 缺少的东西？

任何帮助将不胜感激，谢谢...

Answer 1

您可以改用 svg 的 <image> 元素（基本上是在 svg 内移动图像），这应该适用于大多数浏览器（有关支持图表，请参阅 caniuse）。