如何在容器流体上设置50％的背景图像？

Question

请注意，我确实不是在尝试创建“为我编码代码”主题，我实际上是想亲自解决此问题，但无法解决。我发现了类似的话题，但他们没有解决我的特定问题。

因此，我在Illustrator中具有以下网站设计：

我需要创建一个容器流体，它必须是50％的图像和50％的颜色。我尝试了许多不同的方法，但无法使其起作用，尤其是响应速度。

有没有人可以帮助我解决这个问题？真的很好奇在Bootstrap中是如何完成的。

顺便说一句，为了提高加载时间效率，我正在使用Bootstrap.grid.css，但我没有对所有Bootstrap类的完全访问权限。

Answer 1

请仔细阅读Bootstrap的文档Grid Layout

您可以使用简单的行和列来完成所需的工作；这些内容中的内容如何响应取决于您构建的内容

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 img-bg">
      <span>This background is an image</span>
    </div>
    <div class="col-6 color-bg">
      <h2>Lorem Ipsum</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugiat architecto blanditiis eaque laborum, vel voluptatum voluptas asperiores odio quia error commodi ratione dolorem, cupiditate dolor eius nulla atque quidem?
      </p>
    </div>
  </div>
</div>

{{1}}