在部分顶部和底部的波浪背景

Question

我有一个部分常见问题解答，我希望顶部具有顶部波浪背景，底部也具有波浪背景

我想要这样的东西

这是我到目前为止所拥有的

HTML

<section id="faq">
  <div id="details">
  </div>
</section>

css

#faq{
  background-image: url("wave-top.svg")
  background-repeat: no-repeat, repeat;
  background-color: blue;
}

这里有两个背景图片

顶波

底波

我需要做什么才能得到我想要的东西？

Answer 1

使用多个背景并调整background-size / background-position：

.box {
  padding:11% 0; /* The padding is the area for the shapes, adjust it based on the ratio of the shape*/
  height:100px; /* to illustrate the space for the content */
  background:
    url(https://i.stack.imgur.com/mG3Vb.png) top   /100% auto,
    url(https://i.stack.imgur.com/JSEyE.png) bottom/100% auto,
    linear-gradient(#387dff,#387dff) content-box; /* Color between the shapes only on the content and not the padding*/
  background-repeat:no-repeat;
}

<div class="box">
</div>

Answer 2

获得期望结果的一种方法是通过伪元素。 下面的代码段应该是一个好的开始

#faq {
  width: 100%;
  position: relative;
  padding: 40px 0; /* make the padding the same as the height of the pseudo elements*/
}

#faq:before {
  content: '';
  background: url('https://i.stack.imgur.com/mG3Vb.png');
  width: 100%;
  height: 40px; /*make the height the same as the height of the background image size*/
  background-size: 100% 100%;
  position: absolute;
  top: 0;
}

#faq:after {
  content: '';
  background: url('https://i.stack.imgur.com/JSEyE.png');
  width: 100%;
  height: 40px; /*make the height the same as the height of the background image size*/
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
}

#details-wrapper {
  background-color: #387dff;
  width: 100%
}

#details {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
  color: white;
  font-size: 16px;
}

<section id="faq">
  <div id="details-wrapper">
    <div id="details">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</section>

---

修改

根据Temani Afif的建议，我已更新代码段以使用background-size: 100% 100%;而不是background-size: 100% 40px;，从而删除了另一个要记住要调整的变量