想改善這個(gè)問題？通過編輯這篇文章，更新這個(gè)問題，使它可以用事實(shí)和引用來回答。

我會(huì)告訴你我會(huì)做些什么來實(shí)現(xiàn)這個(gè)目標(biāo)。為此，我將使用Bootstrap來使它在小屏幕設(shè)備上也更好。

我會(huì)把這整個(gè)東西分成三塊。

包含HTML(左側(cè)):管理業(yè)務(wù)文本和按鈕 包含一個(gè)拿著電話的女人的靜態(tài)圖像 帶有波浪形設(shè)計(jì)的背景圖像。 現(xiàn)在取一個(gè)div，將波浪形設(shè)計(jì)的背景圖片應(yīng)用到它上面。將內(nèi)容和帶有圖像的女人劃分到單獨(dú)的div中，每個(gè)div都包含一個(gè)條目。現(xiàn)在，即使屏幕大小發(fā)生變化，它也將保持在原來的位置。

<div class="row m-0 p-0 main-parent-div" >
  <div class="col-12 col-xs-6 p-0">
    Managing Business
  </div>
  <div class="col-12 col-xs-6 p-0 image-div">
    <img src='image.jpg' alt='woman with phone' class="image" />
  </div>
</div>

CSS:

.main-parent-div {
  background-image: url('wavy-image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

/* Use this to control width and height */
.image-div {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Or contain, depending on the image */
}

/* Will keep the image responsive */
.image {
  width: 100%;
  height: auto;
}

引導(dǎo)邊距填充

網(wǎng)格行列