css 背景模糊+半透明 不影响内容如何做？

Question

我想做成一个效果背景是一张图片进行模糊处理，之后上面再附上一层黑色的遮罩层，组成背景，如何让内容不受影响且高度不塌陷？

下面是我的做法，可以完成基本要求,大家有更好的办法吗？
抛砖引玉一下：

<div class="bg-header">
        <div class="bg1"></div>
        <div class="bg2"><p></p></div>
</div>

.bg-header{
    position: relative;
    //height: 300px;
    .bg1{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background:url("../../assets/upload/seller/header-bg.jpg");
           filter: blur(5px);
    }
    .bg2{
        position:relative;
        background: rgba(7, 17,27,0.5);
    }
}

Answer 1

不设父元素高度，设置padding-top为一个百分比值，值为图片的宽高比。