html - 如何在顶部覆盖内容的情况下填充背景图像的一半宽度？

Question

我试图让 background-image 填充相对于图像大小(在本例中为 600x375)位于左上角的父 div 的整个宽度，同时将其保持在 100父 div 的 % 宽度也是如此。除了这样做之外，我还在背景图像上叠加了内容，这是预期的效果。我试过 background-size 但这涵盖了我不想要的整个 div。我希望 background-color:red 保持父 div 的完整背景颜色，因为它现在是，但背景图像大约有一半取决于图像大小。我还在 :after 属性上尝试了 width 和 height 属性，但它似乎改变了 background-image而不是改变图像的实际大小。使 background-image 大小适合并在其上拉伸(stretch)但不覆盖整个父 div 的适当方法是什么。

这是 jsfiddle:https://jsfiddle.net/TheAmazingKnight/6xgrftLj/4/

.container {
    z-index: 10;
    position: relative;
}
#parent {
    padding-top: 70px;
    padding-bottom: 35px;
    content: '';
    background-color: red;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-position-y: 50%;
    background-position-x: 50%;
    position: relative;
}
#parent:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
    background-image: url(https://via.placeholder.com/600x375);
    height: 675px;
    width: 900px;
}

<div id="parent">
        <div class="container" style="
    z-index: 10;
    position: relative;
">
            <h1>Heading 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
            <h3>Lorem ipsum dolor</h3>
            <p><a href="#">Download</a></p>
        </div>
    </div>

Answer 1

我已经为您编写了一个解决方案。在我的解决方案中，我没有使用图像作为背景。我将图像用作 div(#parent) 的子元素并将其定位为绝对。我对您的 html 和 css 文件进行了一些更改。希望它能帮助你。

.container {
    z-index: 10;
    position: relative;
}
#parent {
    position: relative;
    content: '';
    background-color: red;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    position: relative;
}

#parent img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0; 
  width: 100%;
  height: 250px;
  object-fit: cover;
}

<div id="parent">
        <div class="container"
>
          <img src="https://via.placeholder.com/600x375" alt="">
            <h1>Heading 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
            <h3>Lorem ipsum dolor</h3>
            <p><a href="#">Download</a></p>
        </div>
    </div>