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

<div class="mbl">
        <div class="text">
            <blockquote>
                所爱穿山海 山海皆可平
            </blockquote>
        </div>
    </div>
    
    .mbl {
    width: 20em;
    height: 20em;
    background: url(img/1.jpg);
    background-size: cover;
    overflow: hidden;
    margin: 30px;
}

.text {
    width: 18em;
    height: 18em;
    margin: 1em;
    background: hsla(0, 0%, 100%, .4);
    color: black;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.text::before {
    position: absolute;
    background: url(img/1.jpg);
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    filter: blur(20px);
    /*    background: rgba(225, 0, 0, 0.5);*/
}

.text blockquote {
   height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

这样就可以实现了 主要就是 要设置模糊背景的地方通过伪元素设置背景颜色或图片 区域relative定位 伪元素absolute定位 这样才能让伪元素的大小完全等于本来区域的大小 然后用blur滤镜进行模糊处理

Answer 2

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

Answer 3

::before ::after?

Answer 4

问题不是很清楚。

一、如果你只是想让内容撑开bg-header容器，高度随内容高度自适应，那么直接给bg-header加背景不就完了么？

html

  <div class="bg-header">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque eius velit neque sapiente, voluptatum, quibusdam minima quis aut quos id, cumque. Veritatis praesentium sunt nesciunt, corrupti ratione ducimus officia.</p>
    <div class="bg2"></div>
  </div>

css

  .bg-header {
    color: #fff;
    background-image: url('xxx');
  }

这样内容p有多高，容器bg-header就是多高
你问题里把p标签写到遮罩层bg2里面去是什么搞法完全不懂

二、如果是想固定容器宽高比，不写容器高度使用背景图片，那用padding撑开就行了。

  .bg-header::before{
    content: '';
    display: block;
    padding-top: 50%;//宽高比为2比1，就是宽度是高度的50%
  }

这样高度=宽度*padding-top的百分比，高度不受内容影响固定，内容p过长也会超出去。

Answer 5

<img style="-webkit-transform:rotate(0deg);width:293.76375px;-webkit-mask-image:url(.....);-webkit-mask-size:100% 100%;" src="......">
你可参照这种写法， mask-image 是遮罩层 src 是显示的图片