xxx{
background-color: rgba(0,0,0,0.3);
padding-top: 7.6923%;
z-index: 1;
position:relative;
}
xxx:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:url(模糊后的图片地址);
background-attachment:fixed;
background-size:cover;
z-index: -1;
}
通过设置background-attachment:fixed; 来使模糊后的背景图相对网页固定,然后就能产生模糊效果了,