Generated CSS
CSS背景图案是完全通过CSS渐变函数创建的重复视觉纹理——无需图像文件、无需JavaScript、无需外部依赖。它们从简单的单色条纹网格到复杂的多层几何镶嵌都有覆盖。其底层机制是浏览器将CSS渐变渲染为背景图像，并使用background-size控制瓷砖尺寸进行无限平铺的能力。
CSS图案工作的全部基础建立在一个CSS特性上：硬色标。普通渐变会在颜色之间平滑过渡。硬色标在完全相同的位置放置两个色标，导致颜色瞬间跳变而没有任何过渡。语法blue 50%, red 50%意味着"在渐变长度的恰好50%处之前保持蓝色，然后立即变为红色"。
每个CSS图案都有一个background-size来定义瓷砖尺寸。这是你调整使图案更粗或更细的地方。background-size: 24px 24px的点状网格在两个方向上每24像素放置一个点。改为48px 48px，点间距就会加倍。
CSS允许background-image、background-size和background-position有多个值，用逗号分隔。每个条目创建自己的层，从上到下绘制。这就是如何构建复杂图案的方式——一个渐变在80px瓷砖上创建主要网格线，第二个渐变在16px瓷砖上创建次要网格线，两者都叠加在同一个元素上。
repeating-linear-gradient()函数自动平铺其渐变，省去了你自己计算background-size的麻烦。它从第一个硬色标到最后一个重复渐变，以该距离作为瓷砖尺寸。
对角线图案需要特别考虑无缝平铺。当你将条纹图案旋转45度时，瓷砖的尺寸必须使条纹端点在瓷砖边界处完美对齐。repeating-linear-gradient()函数会自动处理这个问题。
当你动画化CSS图案的background-position时，图案变得动态。由于图案在所有方向上无限平铺，移动背景位置会创造连续运动的错觉。滚动条纹图案是一个单独的CSS动画，将background-position从0移动到瓷砖尺寸——在那个精确点，图案看起来与开始时相同，创造出完美循环的动画。
background-blend-mode属性让你可以使用Photoshop风格的混合模式混合多个背景层——正片叠底、滤色、叠加、强光等。这开启了大量仅靠简单叠加无法实现的图案效果。
背景图案在应用于大型背景元素时最有效——英雄区块、卡片背景、模态框叠加层或全页背景。在小元素上，密集的图案会变成视觉噪音。关键的设计决策是不透明度——大多数生产图案使用10-30%不透明度的rgba颜色。
CSS渐变图案由浏览器的绘制引擎渲染，并作为位图瓷砖缓存。一旦初始瓷砖被计算并缓存，在元素上重复它几乎没有成本。然而，具有许多渐变色标的复杂多层图案可能会增加初始绘制时间。
线性和径向渐变图案在所有现代浏览器中无需前缀即可工作。用于棋盘格的conic-gradient()函数在Chrome 69、Firefox 83和Safari 12.1中达到完整支持。
当渐变在右边缘的视觉输出与左边缘完全匹配，上边缘与下边缘匹配时，图案无缝平铺。硬色标至关重要——瓷砖边界处的平滑渐变过渡会产生可见接缝。
可以，当微妙使用时效果很好。直接将图案CSS应用于卡片元素。使用border-radius和overflow: hidden将图案限制在卡片形状内。保持不透明度低——10到25%通常足以添加纹理。
调整background-size属性。较大的值使图案更粗；较小的值使其更细。
具有显式background-size的对角线图案需要瓷砖尺寸与对角线周期匹配。对于45度条纹，N像素的周期需要N × √2 ≈ 1.414 × N像素的瓷砖。使用repeating-linear-gradient()可以避免这个计算。