css - 如何使用 css 模糊图像但保持边框笔直？

Question

我正在尝试使用 CSS 模糊图像。我正在使用“模糊”，但我发现这也模糊了边界。有没有办法保持边框笔直但模糊图像的其余部分？

http://www.inserthtml.com/2012/06/css-filters/

css

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Answer 1

尝试这样的事情：

HTML：

<div id="container">
   <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>​

CSS：

#image{
   filter: blur(5px);
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

#container{
   width:222px;
   height:179px;
   overflow:hidden;
}

由于某种原因（至少在 Chrome 中），图像上的边距似乎是必需的。

同样在 jsfiddle：http: //jsfiddle.net/jdwire/HUaBV/1/。

Answer 2

您可能需要将该图像包装在块级元素中并设置其尺寸以匹配图像并添加overflow: hidden.

Answer 3

div在图像周围环绕 a并调整div比图像尺寸小的几个像素的大小（否则不会裁剪模糊的边缘）。然后装overflow:hidden上div。

请参阅此处的 jsFiddle 演示。

Answer 4

有一个带有边框的 div 就在它上面，然后模糊图像。

css

div.container
{
border:2px solid #000000;
display:inline-block;
}

img.theimage
{
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
}

html

<div class="container">
<img class="theimage" src="iamgesrc.jpg" />
</div>

Answer 5

为了保持边缘清晰，您可以首先将图像在其容器中向左移动并向上移动相同数量的模糊 - 这将清理顶部/左侧边缘。要锐化底部/右侧边缘，请将图像容器的宽度减小 2 * 模糊量。

#image {
    filter: blur(5px);
    -webkit-filter: blur(5px); /* support appears limited http://caniuse.com/#search=css%20filter%20effects */
    margin-left: -5px; /* move the image negative x-blur distance */
    margin-top: -5px; /* move the image negative y-blur distance */
}
#container {
    /* actual image size is 220px * 177px */
    width: 210px; /* subtract 2 * x-blur from width */
    height: 167px; /* subtract 2 * y-blur from height */
    overflow: hidden;
}

约书亚的小提琴在这里详细说明：http: //jsfiddle.net/3EHe9/