如何使jquery不模糊边缘

Question

我已经将这个模糊了图像，但我也模糊了图片的边缘，这使得网站很奇怪

$(function() {
    $({blurRadius: 0}).animate({blurRadius: 2}, {
        duration: 1500,
        easing: 'swing', // or "linear"
                         // use jQuery UI or Easing plugin for more options
        step: function() {
            console.log(this.blurRadius);
            $('.item').css({
                "-webkit-filter": "blur("+this.blurRadius+"px)",
                "filter": "blur("+this.blurRadius+"px)"
            });
        }
    });
});

Answer 1

尝试使用.item将div与overflow: hidden包起来。这是一个example。

简短说明：

HTML：

<div>
    <img src="..." />
</div>

CSS：

img {
    width: 300px;
    height: 200px;
    filter: blur(10px);
}

div {
    overflow: hidden;
    width: 300px;
    height: 200px;
}