如何使用 HTML 和 CSS 为背景创建波浪图像？

在网页设计中，背景图像起着非常重要的作用。它可以使网页更加生动、活泼，吸引用户的注意力。在这篇文章中，我们将学习如何使用 HTML 和 CSS 创建一个波浪的背景图像。

HTML 结构

首先，我们需要在 HTML 文件中创建一个容器来包含我们的背景。代码如下：

<div class="wave-bg"></div>

CSS 样式

接下来，我们需要添加一些 CSS 样式来创建波浪的背景。我们可以使用 CSS 的 linear-gradient() 函数来创建一个水平渐变背景图像，并使用 SVG 路径来创建波浪状。代码如下：

.wave-bg {
  background: linear-gradient(to right, #3b3b3b, #609cff);
  position: relative;
  width: 100%;
  height: 300px;
}

.wave-bg::before,
.wave-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  background: transparent;
  z-index: -1;
}

.wave-bg::before {
  top: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' values='M0,64L48,85.3C96,107,192,149,288,165.3C384,181,480,171,576,149.3C672,128,768,96,864,106.7C960,117,1056,171,1152,192C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320C0,320,0,320,0,320L0,64Z;%20M0,32L48,74.7C96,117,192,203,288,229.3C384,256,480,224,576,192C672,160,768,128,864,144C960,160,1056,224,1152,245.3C1248,267,1344,245,1392,234.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320C0,320,0,320,0,320L0,32Z' dur='10s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}

.wave-bg::after {
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' values='M0,320L48,277.3C96,235,192,149,288,138.7C384,128,480,192,576,218.7C672,245,768,235,864,213.3C960,192,1056,160,1152,133.3C1248,107,1344,85,1392,74.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320C0,320,0,320,0,320Z;%20M0,128L48,117.3C96,107,192,85,288,112C384,139,480,213,576,229.3C672,245,768,203,864,186.7C960,171,1056,181,1152,181.3C1248,181,1344,171,1392,165.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320C0,320,0,320,0,320Z' dur='10s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}

讲解

在上面的代码中，我们创建了一个容器 div.wave-bg，并将其宽度设置为 100%。接着，我们创建了一个线性渐变背景，从 #3b3b3b 到 #609cff。

然后，我们在 div.wave-bg 中创建了两个伪元素 ::before 和 ::after。它们的高度都设置为 100px，并使用绝对定位，分别位于背景图像的顶部和底部。

我们使用的是 SVG 路径动画创建的波浪状背景。两个动画分别设置了不同的 d 值，这里我们只说第一个，第二个可以通过更改 d 值来创建波浪的不同样式。

<path fill='%23fff'%3E%3Canimate attributeName='d' values='M0,64L48,85.3C96,107,192,149,288,165.3C384,181,480,171,576,149.3C672,128,768,96,864,106.7C960,117,1056,171,1152,192C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320C0,320,0,320,0,320L0,64Z;%20M0,32L48,74.7C96,117,192,203,288,229.3C384,256,480,224,576,192C672,160,768,128,864,144C960,160,1056,224,1152,245.3C1248,267,1344,245,1392,234.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320C0,320,0,320,0,320L0,32Z' dur='10s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E

path 元素的 fill 属性设置填充颜色为白色。在 values 属性中，我们定义了一整个 SVG 路径动画，通过改变 d 属性的值，我们定义了两个波浪，分别位于不同的位置，两个波浪的形状通过不同的字符串描述。

这里我们使用了 animate 元素来表示路径轨迹。通过将 values 属性设置为我们所需路径轨迹的 SVG 短语（d 值），我们启用了动画，并使用 dur 属性设置它持续的时间。

我们在伪元素 ::before 和 ::after 中分别引用了这两个动画，将它们定位到波浪的顶部和底部。最后，我们将这些元素的 z-index 属性设置为 -1，使它们位于网页的背景下面。

现在，当我们运行代码并在浏览器中预览时，就可以看到一个漂亮的波浪背景了。

总结

在这篇文章中，我们学习了如何使用 HTML 和 CSS 创建一个漂亮的波浪背景。我们创建了一个容器 div.wave-bg，并使用 CSS 渐变和 SVG 路径动画创建了两个波浪。

在您的项目中使用此代码时，请记住更改 path 元素中的 fill 属性和 values 属性中的颜色值来适应您的设计需求。