html怎么背景模糊效果,html – 模糊背景图像的一部分css

或者,您可以使用

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的类中只是一个解决方案,使模糊效果不会影响顶部和侧面,背景位置：0 3px;设置为将背景图像向下移动3px,因为我们将顶部：-3px设置为.blurry div