如何使用带有图像作为背景的 html 和 css 使部分的顶部和底部向内弯曲而不是向外弯曲？ [复制]答案

【问题标题】：How do I make top and bottom of a section curved inwards instead of outwards using html and css with an image in as the background? [duplicate]如何使用带有图像作为背景的 html 和 css 使部分的顶部和底部向内弯曲而不是向外弯曲？ [复制]
【发布时间】：2020-07-22 05:37:53
【问题描述】：

我想添加一个应该在顶部和底部向内弯曲的部分，在背景中有一个图像。我尝试使用 svg 和路径，但无法获得所需的结果。

我在图片链接下方插入了我想要的结果。

section {
    padding: 60px 0;
    position: relative;
}

<section id="statistics" data-dir="up" style="background-image: url(https://hero.jpg); background-size: cover; background-position: center; background-attachment: fixed;" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>

【问题讨论】：

来自副本：stackoverflow.com/a/51343464/8620333

标签： html css

【解决方案1】：

这是一种方法。

:root, html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

* {
 box-sizing: border-box;
}

#header {
  height: 20%;
  width: 100%;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 80%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.5)), center / cover no-repeat url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSGvXdNxVmnn-fpjDeYYX-BqwD4mzPn6D79pw&usqp=CAU");
}

#top {
  width: 100%;
  height: 35%;
  background: white;
  clip-path: ellipse(65% 80% at center -40%);
}

#center {
  width: 100%;
  flex: 1;
  color: white;
  font-size: 1.5em;
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
}

#bottom {
  width: 100%;
  height: 35%;
  background: white;
  clip-path: ellipse(65% 80% at center 140%);
}

<div id="header"></div>
<div id="main">
  <div id="top"></div>
  <div id="center">
    Some Interesting Facts About Us
  </div>
  <div id="bottom"></div>
</div>
<div id="footer"></div>

【讨论】：

【解决方案2】：

您可以使用相同的路径并将其旋转 180 度，然后将其绝对定位在该部分的底部。为了确保元素高度适合，我必须在 section 元素上添加显式高度。

section {
    margin: 60px 0;
    height: 400px;
    position: relative;
}
#statistics {
  background: url(https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2015/01/blend-mode-example-screenshot.png);
  background-size: cover; 
  background-attachment: fixed;
  background-position: center;
}
#bigHalfCircleCandyBottom {
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  left: 0;
}

<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>

<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>

可以在this Fiddle 中找到更完整的示例以及中间文本的容器。

【讨论】：