html - 使用 CSS 模糊图像或背景图像的边缘

Question

我知道有很多新的 CSS 过滤器，我想知道是否有办法将它们应用于图像或背景图像。我读过的所有内容都在谈论用阴影柔化图像，但是，阴影是一种颜色，我想模糊图像的边缘，以便在它们彼此相邻时可以更无缝地将它们混合在一起。现在看来您只能使用阴影或对整个图像应用模糊(根据我所读的内容)。

我能想到的最接近的是一个半透明的盒子阴影....像这样

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

Answer 1

如果您只是想模糊图像边缘，您可以简单地使用带插图的框阴影。

工作示例: http://jsfiddle.net/d9Q5H/1/

HTML:

<div class="image-blurred-edge"></div>

CSS

.image-blurred-edge {
    background-image: url('http://lorempixel.com/200/200/city/9');
    width: 200px;
    height: 200px;
    /* you need to match the shadow color to your background or image border for the desired effect*/
    box-shadow: 0 0 8px 8px white inset;
}