css - 在子 div 内容下呈现父 background-image 属性

Question

我在 CSS 中有一个 div 结构，看起来像这样。

<div style="background-image: url(my_url.ext)>
    <div>
        My content 1.
    <div>
    <div>
        My content 2.
    <div>
</div>

当网站在移动设备上显示时，我希望 background-image 属性显示在内容 div 下方。我尝试使用 background-position 属性，但它没有扩展父 div 的长度并且实际上隐藏了图像。有没有办法在不设置单独的 <img> 的情况下执行此操作？父项内的标签 <div> ？我的 CSS 类目前看起来像这样:

.myClass/root {
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
}

@media (desktop-breakpoint) {
    .myClass/root {
        position: relative;
    }

    .myClass/root .myClass/background {
        background-size: cover;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
}

@media (mobile-breakpoint) {
    .myClass/root {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .myClass/root .myClass/background {
        background-size: cover;
        flex-grow: 1;
    }
}

Answer 1

这行得通

#parent{
  height:auto;
  width: auto;
  color:#fff;
  position:relative;
}
#parent:after{
  content: "";
  height:100%;
  width: 100%;
  position: absolute;
  left:0;
  top:0;
  background-position:center center;
  background-size: cover;
  background-clip: content-box;
  background-image: url(https://images.pexels.com/photos/110147/pexels-photo-110147.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  z-index:-1;
}

@media(max-width: 767px){
  #parent div{
    background: #000;
  }
  #parent:after{
  content: "";
  height:50px;
  width: 100%;
  position: relative;
  display:block;
  background-position:center center;
  background-size: cover;
  background-clip: content-box;
  background-image: url(https://images.pexels.com/photos/110147/pexels-photo-110147.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  z-index: 50;
}
}

而你的html如下

<div id="parent">
    <div>
        My content 1.
    </div>
    <div>
        My content 2.
    </div>
</div>

working fiddle