模糊背景图像与锋利的边缘和清洁相同的图像。

Question

这就是我想要做的......

.detail_image{ 
   background:url("../images/hero-images.jpg") no-repeat;
   background-size: cover;
   background-position:center;
   padding: 0 0 30%;
   position: relative;
   height:698px;
}
.detail_overlay{
   background:url("../images/overlay-detail.png");
   height: 100%;
   position: absolute;
   width: 100%;
   -webkit-filter: blur(20px);
   -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
}
.detail_img{
   height: 100%;
   margin-left: 165px;
   position: absolute;
   width: 50%;
   box-shadow: 12px 0 15px -4px rgba(0, 0, 0, 1), -12px 0 8px -4px rgba(0, 0, 0, 1);
}

正在发生的事情是整个div模糊了图像，边缘也模糊了。

Answer 1

为DIV创建父DIV容器，该容器变得模糊，具有相同的尺寸和溢出隐藏。因此，它将为您的模糊div创建剪贴蒙版。

如果您在JSFiddle上提供一些代码段，我可以帮您解决代码问题。

Answer 2

blur CSS过滤器，就像您自己看到的一样，模糊了包括图像边框在内的所有内容。要在保持模糊内容的同时拥有清晰的边框，您需要一个父元素来容纳它。

请考虑以下代码：

.container {
    overflow: hidden;
}

.blurred-image {
    filter: blur(20px);
}

<div class="container">
    <img class="blurred-image" src="path/to/image">
</div>

这将作为所包含的.blurred-image的剪贴蒙版，只要尺寸匹配将保证清晰的边框和模糊的内容。

Answer 3

<div class="parent"><div class="backgroundImg"></div><div class="frontImg"></div></div>

将背景图像缩放至105％并剪切边框以使边缘锐化或将相同图像放在模糊图像的背面。

提供一些示例小提琴，这将有所帮助。