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

这就是我试图做...模糊与锋利的边缘和干净的相同图像的背景图像。

.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得到了模糊与它的图像和边缘模糊了。

来源

2016-02-29 Rahul Gupta

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

考虑下面的代码：

.container { 
    overflow: hidden; 
} 

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

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

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

来源

2016-02-29 10:27:35

与我的答案有什么不同？ :) – Farside

你的解释很模糊，缺少示例代码。此外，作为概念的抽象证明，用户不需要提供代码片段。该方法清晰直接。 –

检查我提供的代码片段https://jsfiddle.net/ug26errq/ – Farside

为DIV创建父DIV容器，DIV容器变得模糊，隐藏了相同的尺寸和溢出。所以它会为你模糊的div创建剪贴蒙版。

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

来源

2016-02-29 10:09:02 Farside

这里是小提琴 https://jsfiddle.net/pL33k4df/ –

@RahulGupta，代码和命名是在你的例子有点乱，但我试图把它清理干净一点，重现您想要的东西在原始问题的屏幕截图上：https://jsfiddle.net/ug26errq/ – Farside

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

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

提供一些样品小提琴，这将有所帮助。

来源

2016-02-29 11:53:56 Prabhakaran

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

回答

相关问题