如何模糊掉背景图像的前70像素?背景图片在body中,我有一个透明度为.08的菜单栏,我想用它来模糊背景。最佳方法是什么,如何实现?
如何模糊掉背景图像的前70像素?背景图片在body中,我有一个透明度为.08的菜单栏,我想用它来模糊背景。最佳方法是什么,如何实现?
::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 大,因此混乱的边框将被隐藏。这有点难以解释,所以请查看示例。
另外,您也可以使用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
设定为了。::before
CSS即可。 - Mi-Creativity