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

Question

我试图让 background-image 填充相对于图像大小（在本例中为 600x375）位于左上角的父级 div 的整个宽度，同时将其保持在父级 div 的宽度也为 100%。除了这样做之外，我还在背景图像上叠加了内容，这是预期的效果。我尝试了 background-size，但这涵盖了我不想要的整个 div。我希望 background-color:red 像现在一样保持父级 div 的完整背景颜色，但背景图像的一半取决于图像大小。我还在 :after 属性上尝试了 width 和 height 属性，但它似乎移动了 background-image 而不是改变图像的实际大小。什么是使 background-image 尺寸适合并延伸到它但不覆盖整个父级 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>

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

How to fill the width of a background image about half way with content overlaying on top?

html

css

background

background-image