第 21 天：如何使用 SVG 和 CSS 创建背景图案

这个例子有点像复活节彩蛋，因为我们的文档中只有一个普通的 HTML 元素。对于任何 HTML 元素，都可以使用 CSS 设置背景图片background-image。对于这个 CSS 属性，我们通常会提供一个指向图片的链接，但也可以在 CSS 中内嵌一个图片。

通常情况下，你不会这么做，因为你的 CSS 中最终会出现一些乱七八糟的东西。不过，如果我们用 SVG 这样做，就不会那么令人费解了。SVG 代码仍然是字符编码的，所以你仍然会看到一些奇怪的部分。这里的尖括号和 # 关键字必须转义。

<div class="background" />

.background {
  background-color: #38755b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 120 120'%3E%3Cpolygon fill='%230c5c4c' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/%3E%3C/svg%3E");
}

如果我们看一下代码内部，可以看到这就是我们在 CSS 中定义的图像。因为默认情况下背景图片是重复的，所以我们只需定义一张图片。你可能还会注意到，这张图片甚至没有设置背景颜色。我们也是在 CSS 中定义的。

还要注意的是，由于该图片没有被定义为 HTML 文档结构的一部分，因此我们还需要设置 xmlns 属性。

<svg 
  xmlns='http://www.w3.org/2000/svg' 
  width="50"
  height="50"
  viewBox="0 0 120 120"
>
  <polygon 
    fill="#0c5c4c"
    points="
      120 120 60 120 
      90 90 120 60 
      120 0 120 0 
      60 60 0 0 
      0 60 30 90 
      60 120 120 120"
  />
</svg>

这是一种只需几行 CSS 代码就能创建背景图案的好方法。

分享：