使用渐变、CSS 形状甚至表情符号创建创意背景图案

您可以 在 CSS 中创建条纹。长期以来，我一直只考虑过 CSS 背景图案的条纹。条纹并没有什么不好；条纹很酷。它们可以自定义成宽窄不同的条带，交叉形成格子图案，还可以通过 硬停的概念 以其他方式进行操作。但条纹也可能很无聊。过于传统、过时，有时甚至令人不快。

谢天谢地，我们可以用 CSS 创造出比您想象中更多种类的背景图案，而代码在精神上与条纹类似。

背景图案是重复出现在背景上的图像。它们可以通过引用外部图像（如 PNG 文件）来实现，也可以使用 CSS 绘制，传统上使用 CSS 渐变来实现。

线性渐变（以及 重复线性渐变）通常用于条纹。但还有其他方法可以创建酷炫的背景图案。让我们看看如何以其他方式使用渐变，以及如何添加其他元素，例如 CSS 形状和表情符号，来增加趣味性。

渐变图案

有三种类型的 CSS 渐变。

1. linear-gradient()：颜色从左到右、从上到下流动，或以您选择的任何角度沿单个方向流动。
2. radial-gradient()：颜色从一个点开始，向外扩散。
3. conic-gradient()：与径向渐变的概念类似，但颜色停止点位于圆圈周围，而不是从中心点向外扩散。

我建议您 查看所有渐变的语法，以便彻底了解如何在渐变中开始和结束颜色。

径向渐变图案

让我们先来看看 径向渐变，因为它们可以提供非常有用的东西：圆形和椭圆形。两者都可以用于创建非常有趣的图案，并可能为您打开一些思路！

background: radial-gradient(<gradient values>)

这是一个使用这种技术的重复西瓜图案

background: 
	radial-gradient(circle at 25px 9px, black 2px, transparent 2px), 
	radial-gradient(circle at 49px 28px, black 2px, transparent 2px), 
	radial-gradient(circle at 38px 1px, black 2px, transparent 2px), 
	radial-gradient(circle at 20px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 80px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 50px 10px, black 2px, transparent 2px), 
	radial-gradient(circle at 60px 16px, black 2px, transparent 2px), 
	radial-gradient(circle at 70px 16px, black 2px, transparent 2px), 
	radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) 
	white;
background-size: 100px 50px;

我们首先在元素上提供一个背景大小，然后在其中叠加渐变。椭圆形构成绿色和红色部分。黑色圆圈散落在周围，代表西瓜籽。

径向渐变函数的前两个参数决定了渐变形状是圆形还是椭圆形，以及渐变的起始位置。其后是渐变颜色值，以及渐变中的起始位置和结束位置。

圆锥渐变图案

圆锥渐变创建射线状形状。与线性渐变和径向渐变类似，圆锥渐变 可用于创建几何图案。

background: conic-gradient(<gradient values>)

background: 
  conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg), 
  conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ;
background-size: 60px 60px;
background-color: white;

圆锥渐变的问题在于它在 Firefox 中不受支持，至少在撰写本文时是如此。始终值得关注更深层次的支持。

表情符号图标图案

事情开始变得有趣了。我们不再仅仅使用几何图案（如渐变），而是使用表情符号的自然形状来创建背景图案。🎉

它从表情符号图标开始。

纯色表情符号图案

我们可以 创建表情符号图标，方法是给表情符号一个透明颜色和文字阴影。

color: transparent;
text-shadow: 0 0 black;

然后，这些图标可以转换为图像，使用 SVG 作为背景。

<svg>
  <foreignObject>
    <!-- The HTML code with emoji -->
  </foreignObject>
</svg>

然后，可以使用 数据 URL，通过背景属性引用 SVG。

background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><!-- SVG code --></svg>");

就这样！我们会得到这样的东西

background: 
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><foreignObject width=%22100px%22 height=%22100px%22><div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22color:transparent;text-shadow: 0 0 %23e42100, -2px 2px 0 black;font-size:70px%22>🏄‍♀️</div></foreignObject></svg>"), 
    white; 
background-size: 60px 60px; 

除了表情符号，还可以 绘制 CSS 形状 并将其用作图案。不过，表情符号的工作量更少。只是说一下。

渐变色表情符号图案

我们可以不使用普通表情符号图标，而是使用渐变表情符号图标。为此，请跳过表情符号的文字阴影。在表情符号后面添加一个渐变背景，并使用 background-clip 将渐变背景修剪成表情符号的形状。

color: transparent;
background: linear-gradient(45deg, blue 20%, fuchsia);
background-clip: text; /* Safari requires -webkit prefix */

然后，就像以前一样，使用 SVG 和数据 URL 的组合来创建背景图案。

半透明色表情符号图案

这与使用块状颜色表情符号图标相同。但是，这次我们使用 rgba() 或 hsla() 值来移除文字阴影的透明度。

color: transparent;
text-shadow: 20px 10px rgba(0, 255, 0, .3), 
             0 0 red;

SVG 文本表情符号图案

我们已经查看了所有我能想到的用于创建背景图案的有效方法，但我感觉我应该再提一下我尝试过的一种其他技术，该技术不像我希望的那样得到广泛支持。

我尝试将表情符号放在 SVG 的<text>元素中，而不是使用 <foreignObject> 添加的 HTML。但我无法在所有浏览器中为其创建实心阴影。

background: 
  url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2270%22 fill=%22transparent%22 style=%22text-shadow: 0 0 %23e42100, -2px 2px 5px black, 0 0 6px white; ;%22>🏄‍♀️</text></svg>")

以防万一，我还尝试使用 CSS 和 SVG 过滤器来实现阴影，认为这可能行得通。但它不行。我还尝试使用 stroke 属性，至少为表情符号创建轮廓，但这也不行。

CSS element() 图案

我在最初想到将表情符号图标或 CSS 形状转换为背景图像时，并没有想到 SVG。我尝试过 CSS 的 element()。这是一个将 HTML 元素直接转换为图像的函数，可以引用和使用该图像。我非常喜欢这种方法，但浏览器支持是一个巨大的问题，这就是为什么我在最后提到它。

基本上，我们可以像这样在 HTML 中放置一个元素

<div id=snake >🐍</div>

…然后将其传递给 element() 函数，就像在其他元素上使用图像一样，例如

background: 
  -moz-element(#snake), /* Firefox only */
  linear-gradient(45deg, transparent 20px, blue 20px, blue 30px, transparent 30px) 
  white;
background-size: 60px 60px;
background-color: white;

现在，该蛇表情符号实际上就成为可以包含在图案中的图像了。

同样，浏览器支持参差不齐，使得这种方法非常具有实验性。

在此方法中，用于背景图案的原始表情符号（或任何 CSS 形状）需要在屏幕上渲染，才能在背景图案中显示出来。为了隐藏该原始表情符号，我使用了 mix-blend-mode - 它可以像掩码一样，将 HTML 中的原始表情符号掩盖起来，使其不会显示在页面上。

---

我希望您能以某种方式发现本文中的方法有用，并且在此过程中学到了一些新东西！试试看。尝试不同的表情符号和 CSS 形状，因为渐变虽然很酷，但并不是制作图案的唯一方法。background 属性接受多个值，这让我们可以想出创意的方式来堆叠东西。