如何使底部带有曲线的背景？

Question

我想知道即使在图像中也可以制作这些曲线吗？

Answer 1

您也可以使用svg。

.background-img {
  background-image: url(https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  position: relative;
}

#bigHalfCircle {
  position: absolute;
  bottom: 0;
}

#bigHalfCircle path {
  fill: #fff;
  stroke: #fff;
}

<section class="background-img">
  <svg id="bigHalfCircle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 100 C40 0 60 0 100 100 Z"></path>
  </svg>
</section>

<section class="background--color" style="background-color: #fff; height: 500px;">
</section>