Question

我想模糊div的内容，这个功能在谷歌浏览器中正常工作，但不适用于mozila firefox，

这是我的代码，

<!doctype html>
<html>
<head>

<title>How to create blur effect with jQuery and CSS</title>

<style>
    body{
        text-align: center;
    }

    input{
        margin-top:20px;
        font-size:16px;
        font-weight: bold;
        padding:5px 10px;
    }

    #box{
        margin:50px auto;
        width:500px;
        height:100px;
        color:#fff;
        padding:10px;
        background: #333;
    }

</style>

</head>
<body>


<input type="button" value="Blur Box" class="button"  />
<input type="button" value="Reset Box" class="button2"  />

<div id="box">We use Google's CDN to serve the jQuery js libs. 
    To speed up the page load we put these scripts at the bottom of the page </div>

<!-- 
    We use Google's CDN to serve the jQuery js libs. 
    To speed up the page load we put these scripts at the bottom of the page 
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

    //DOM loaded 
    $(document).ready(function() {

        //attach click event to button
        $('.button').click(function(){

            //when button is clicked we call blurElement function
            blurElement("#box", 2);

        });

        //attach click event to button
        $('.button2').click(function(){

            //set box blur to 0
            blurElement("#box", 0);

        });


    });

    //set the css3 blur to an element
    function blurElement(element, size){
        var filterVal = 'blur('+size+'px)';
        $(element)
          .css('filter',filterVal)
          .css('webkitFilter',filterVal)
          .css('mozFilter',filterVal)
          .css('oFilter',filterVal)
          .css('msFilter',filterVal);
    }



</script>

</body>
</html>

请帮助我了解如何在所有浏览器中运行此代码（特别是mozilla firefox，IE 9+）提前谢谢。

Answer 1

这应该让你开始，你需要使用SVG for firefox，并需要写一些东西来改变feGaussianBlur标签上的值。 Haven没有对IE部分进行测试，但我认为这是正确的。

查看实际操作：http://jsfiddle.net/nso4e1qu/9/

<input type="button" value="Blur Box" class="button"  />
<input type="button" value="Reset Box" class="button2"  />

<div id="box">We use Google's CDN to serve the jQuery js libs. 
    To speed up the page load we put these scripts at the bottom of the page </div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 


//DOM loaded 
$(document).ready(function() {

    //attach click event to button
    $('.button').click(function(){

        //when button is clicked we call blurElement function
        blurElement("#box", 2);

    });

    //attach click event to button
    $('.button2').click(function(){

        //set box blur to 0
        blurElement("#box", 0);

    });


});

//set the css3 blur to an element
function blurElement(element, size){
    var filterVal = 'blur('+size+'px)';
    var filterValMoz = 'url(#blur)';
    var filterIE = 'progid:DXImageTransform.Microsoft.Blur(PixelRadius=' + size + ')';
    $(element)
    .css('filter',filterVal)
    .css('-webkit-filter',filterVal)
    .css('-o-filter',filterVal)
    .css('-ms-filter',filterVal)
    .css('filter',filterValMoz);
}

 body{
        text-align: center;
    }

    input{
        margin-top:20px;
        font-size:16px;
        font-weight: bold;
        padding:5px 10px;
    }

    #box{
        margin:50px auto;
        width:500px;
        height:100px;
        color:#fff;
        padding:10px;
        background: #333;
    }

svg {
  position:absolute;
  left:-999px;
}
.blur {
   filter: blur(3px); 
  -webkit-filter: blur(3px); 
  -moz-filter: blur(3px);
  -o-filter: blur(3px); 
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');   
}

Answer 2

IE中不支持过滤器，仅在FF 35中支持

见

jquery函数在mozilla firefox中不起作用，但在谷歌Chrome中工作

2 个答案: