模糊背景图像的一部分 css

Question

模糊背景图片前 70 像素的最佳方法是什么？背景图片在正文中，我有一个不透明度为 0.08 的菜单栏，我想用它来模糊背景。什么是最好的方法，我该怎么做？

Answer 1

您可以在该菜单栏顶部创建一个伪元素（使用 ::before；或者您可以创建一个常规元素，但那样比较麻烦），高度为 70px，宽度为 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 上的 working example。

应要求，here 是创建 "sharp" 模糊区域边缘的解决方案。

它更复杂，需要您定义第二个 <div> 并创建模糊背景 inside inner <div>。但是内层<div>里面的伪元素比内层div大，所以杂乱的边框会被隐藏。解释起来有点难，看例子吧

Answer 2

或者，您可以使用 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;

在class的blurred 70px div只是一个workaround，这样模糊效果就不会影响top和sides，background-position:0 3px;是设置将背景图像向下移动 3px 因为我们将 top:-3px 设置为 .blurry div

模糊背景图像的一部分 css

Blur a part of the background image css

html

css

blur