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

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;
}

这是我的两张背景图片

顶波

底波

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

标签： htmlcssbackground-image

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>