Html 剖面顶部和底部的波浪背景

我有一个部分常见问题，我想顶部部分有波浪背景，底部部分也有波浪背景

我想要这样的

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

HTML

这里有两张图片作为背景

顶波

底波

---

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

使用多个背景并调整

背景大小

/

背景位置

：

.box{
填充：11%0；/*填充是形状的区域，根据形状的比例进行调整*/
高度：100px；/*用于说明内容的空间*/
背景：
网址(https://i.stack.imgur.com/mG3Vb.png)顶级/100%自动，
网址(https://i.stack.imgur.com/JSEyE.png)底部/100%自动，
线性渐变（#387dff，#387dff）内容框；/*形状之间的颜色仅在内容上，而不在填充上*/
背景重复：无重复；
}

---

使用多个背景并调整

背景大小

/

背景位置

：

.box{
填充：11%0；/*填充是形状的区域，根据形状的比例进行调整*/
高度：100px；/*用于说明内容的空间*/
背景：
网址(https://i.stack.imgur.com/mG3Vb.png)顶级/100%自动，
网址(https://i.stack.imgur.com/JSEyE.png)底部/100%自动，
线性渐变（#387dff，#387dff）内容框；/*形状之间的颜色仅在内容上，而不在填充上*/
背景重复：无重复；
}

---

实现所需结果的一种方法是通过伪元素。 下面的代码片段应该是一个很好的开始

#常见问题解答{
宽度：100%；
位置：相对位置；
填充：40px 0；/*使填充与伪元素的高度相同*/
}
#常见问题解答：以前{
内容：''；
背景：url（'https://i.stack.imgur.com/mG3Vb.png');
宽度：100%；
高度：40px；/*使高度与背景图像大小的高度相同*/
背景大小：100%100%；
位置：绝对位置；
排名：0；
}
#常见问题解答：之后{
内容：''；
背景：url（'https://i.stack.imgur.com/JSEyE.png');
宽度：100%；
高度：40px；/*使高度与背景图像大小的高度相同*/
背景大小：100%100%；
位置：绝对位置；
底部：0；
}
#详细信息包装器{
背景色：#387dff；
宽度：100%
}
#细节{
宽度：300px；
保证金：0自动；
字体系列：无衬线；
颜色：白色；
字体大小：16px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。

实现所需结果的一种方法是通过伪元素。 下面的代码片段应该是一个很好的开始

#常见问题解答{
宽度：100%；
位置：相对位置；
填充：40px 0；/*使填充与伪元素的高度相同*/
}
#常见问题解答：以前{
内容：''；
背景：url（'https://i.stack.imgur.com/mG3Vb.png');
宽度：100%；
高度：40px；/*使高度与背景图像大小的高度相同*/
背景大小：100%100%；
位置：绝对位置；
排名：0；
}
#常见问题解答：之后{
内容：''；
背景：url（'https://i.stack.imgur.com/JSEyE.png');
宽度：100%；
高度：40px；/*使高度与背景图像大小的高度相同*/
背景大小：100%100%；
位置：绝对位置；
底部：0；
}
#详细信息包装器{
背景色：#387dff；
宽度：100%
}
#细节{
宽度：300px；
保证金：0自动；
字体系列：无衬线；
颜色：白色；
字体大小：16px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。

您可以使用

100%100%

简化背景大小，因此默认情况下，它将获得指定的高度，您将删除一个参数这是否响应？@user9964622是的，您可以使用

100%100%

简化背景大小，因此默认情况下，它将获得指定的高度，您将删除一个参数这是有响应？@user9964622是的，我该如何使它有响应？@user9964622它已经有响应了，因为我正在使用percetange值进行填充。高度会随着内容的不同而增加（我在这里使用了一个固定的值来说明，但是你可以删除它，让内容定义高度）这是我的开发工具，我正在在线测试，请检查它，它没有响应：或者可能我的代码有问题：@user9964622您正在用另一个规则覆盖我正在设置的填充，请尝试

padding:11%0！重要信息

如何使其响应？@user9964622它已经响应了，因为我正在使用percetange值进行填充。高度会随着内容的不同而增加（我在这里使用了一个固定的值来说明，但是你可以删除它，让内容定义高度）。这是我的开发工具，我正在在线测试，它没有响应：或者

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

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