html中如何将背景图片模糊效果,【css】背景图片模糊效果

首先原图片效果 + 代码：

image.png

.wrapper {

position: relative;

width: 100%;

height: 100vh;

overflow: hidden;

}

.wrapper::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603428298496&di=64640a01efa82d69fd270969ca2a8321&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201405%2F31%2F124814kg76m5xeenbax6qn.jpg);

background-size: cover;

background-attachment: fixed;

}

模糊之后 效果 + 代码：

image.png

/* before添加 */

filter: blur(20px);