Question

模糊背景图像前70px的最佳方法是什么？背景图像在身体中，我有一个带有.08不透明度的菜单栏，我想用它来模糊背景。什么是最好的方式，我该怎么做？

Answer 1

您可以在该菜单栏的顶部创建一个伪元素（使用::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上的working example。

根据要求，here是创建“锐利”模糊区域边缘的解决方案。

它更复杂，需要您定义第二个<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;

模糊70px div的类中的

只是一种解决方法，因此模糊效果不会影响顶部和侧面，background-position:0 3px;设置为将背景图像向下移动{{ 1}}因为我们将3px设置为top:-3px div

模糊背景图像css的一部分

2 个答案: