如何用CSS制作模糊背景效果

HTML部分

要为header部分设置一个模糊的背景图片作为背景，HTML部分如下，把内容部分与背景部分都作为header的一级子元素

<div class="header">
    <div class="text">
        这里写要显示的内容
    </div>
    <div class="background">
        <img width="100%" height="100%" src="选择路径">
    </div>
</div>

CSS部分

在CSS中设置.header为相对定位，背景颜色的设置一定要为rgba并且透明对小于1，不然看不到背景图片。

.background中设置z-index：-1使其在最底层，利用filter: blur(10px)设置模糊度即可。

.header{
    position:relative;
    color :#fff;
    background rgba(1,17,27,0.5);
    height:500px;
    width:100%;
}
.header .background{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(10px);
}

效果如下