模糊背景图像css的一部分

Question

模糊背景图像前70像素的最佳方法是什么？背景图像在主体中，我有一个不透明度为.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上的工作示例。

---

根据要求，这里有一个创建"清晰"模糊区域边缘的解决方案。

它更复杂，需要定义第二个<div>，并在内部<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;

在模糊的类别中，70pxdiv只是一个变通方法，这样模糊效果就不会影响顶部和侧面，background-position:0 3px;被设置为将背景图像向下移动3px，因为我们将top:-3px设置为.blurrydiv