CSS中如何模糊化背景图像的某一部分

Question

CSS中如何模糊化背景图像的某一部分

htmlcssblur

4

如何模糊掉背景图像的前70像素？背景图片在body中，我有一个透明度为.08的菜单栏，我想用它来模糊背景。最佳方法是什么，如何实现？

- Jonathan Öhrström

1

模糊上方70像素还是左边70像素？ - Jonathan Lam

1

@Jonathan 嘿，好名字！（我的名字也是 Jonathan 😉）我的菜单栏延伸到整个宽度，所以应该是居中顶部。 - Jonathan Öhrström

不，我的名字是杰夫。无论如何，看看我的答案。实际上，它比我预期的要好得多。我希望它能有所帮助！（关于我的名字，只是开玩笑） - Jonathan Lam

2个回答

1

另外，您也可以使用JavaScript实现相同的效果 - CSS更好 - 正如在此JSFiddle中所示。

var blurredDiv = document.createElement('div');
blurredDiv.className = 'blurry';
document.body.appendChild(blurredDiv);

body {
    margin:0;
    padding:0;
    background-image:url('//cdn01.wallconvert.com/_media/wallpapers_2880x1800/1/4/silver-bmw-i8-39331.jpg');
    background-size:cover;
}
.blurry {
    width:calc(100% + 6px);
    height:73px;
    position:fixed;
    top:-3px;
    left:-3px;
    background-image:url('//cdn01.wallconvert.com/_media/wallpapers_2880x1800/1/4/silver-bmw-i8-39331.jpg');
    background-size:cover;
    background-position:0 3px;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

以下CSS代码行：

width:calc(100% + 6px);
height:73px;
position:fixed;
top:-3px;
left:-3px;
background-position:0 3px;

在模糊的类中，70px 的 div 只是一个解决方法，以便模糊效果不会影响顶部和侧面，background-position:0 3px; 设置为将背景图像向下移动 3px，因为我们将 .blurry div 的 top:-3px 设定为了。

- Mi-Creativity

那是一张漂亮的图片...我会点赞作为一个好的替代选择，但是我已经用完了我的每日投票=( - Jonathan Lam

1

实际上，我已经为您的答案点赞，因为它是更好的答案，但这个我发布的只是一个解决左侧、右侧和顶部不必要模糊效果的方法。 - Mi-Creativity

我在我的更新中基本上做了同样的事情。请查看更新和说明。 - Jonathan Lam

这个技巧可以将所有内容均匀地覆盖到边缘，但是我对结合网站构建的JavaScript非常陌生，所以不知道如何实现这个哈哈哈 - Jonathan Öhrström

@Condolent，你不需要JavaScript部分，采用Jonathan的答案作为更好的解决方案，但只需单独添加额外的CSS并将其添加到Jonathan答案中的::before CSS即可。 - Mi-Creativity

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Lam · Accepted Answer

您可以在菜单栏上方创建一个伪元素（使用::before），或者您可以创建一个常规元素，但这更加麻烦。该元素的高度为70像素，宽度为100%（模糊区域的大小）。然后，您可以将其背景设置为与菜单栏相同，但是进行模糊处理。

html, body {
    height: 100%;
    margin: 0;
}

div {
    height: 100%;
    width: 100%;
    background-image: url(http://www.opaletch.co.uk/photos/rotating-patterns/p1921ri7pv1bb41m95du15sa1ce55.jpg);
}
div::before {
    content: ' ';
    display: block;
    width: 100%;
    height: 70px;
    background-image: url(http://www.opaletch.co.uk/photos/rotating-patterns/p1921ri7pv1bb41m95du15sa1ce55.jpg);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
}

<div></div>

更改图像以更好地显示模糊效果

注意：由于模糊算法的原因，边缘不会模糊太多，但这是微小的。

请在 JSFiddle 上查看工作示例。

根据要求，这里提供了一个解决方案，可以创建“锐利”的模糊区域边缘。

它更复杂，需要您定义第二个 <div> 并在内部的内部 <div> 中创建背景模糊。但是内部 <div> 中的伪元素比内部 div 大，因此混乱的边框将被隐藏。这有点难以解释，所以请查看示例。