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

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;，从而删除了另一个变量以记住调整

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

Wave background on top and bottom of a section

html

css

background-image