👂🏻 ⚜️ 👩🏼‍🎓 有效地放置图块（Pro CSS，SVG，图案等） 🛢️ 👨‍🎓 💖

~~有关公寓装修~~的文章，有关有效利用现代设备的图形资源的文章。从智能手表到电视机再到墙上。

关于如何将背景重复图像插入页面的故事，以便每个人都可以。

好吧，你准备好玩..吗？然后开车

介绍性

创建带有重复图像的网站页面是一项任务。

我们将如何决定？

1级Trite原语

大量排字机使用它的最简单方法是一次拾取所有背景图像（最常见的是png格式，因为它是在Figma和Avocode中默认设置的），然后通过background-image将其翻转到块中；
（*好吧，我年轻的读者，你不是那样吗？）

body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }

如果开发人员比较有经验，并且知道jpg通常比png更好地被压缩，那么背景将为jpg格式。

2级我不在乎性能

如果布局设计师不关心开发页面的性能，并且他知道在这个地方您可以大大节省用户访问量，那么如果您幸运的话，他可以从该图像中分离出图案（背景的重复部分）。

如果布局是在PhotoShop中实现的，则必须裁剪。因为背景是由一个不可分割的元素设置的。

从Avocode获取重复背景的示例

在Figma中，这实现起来要容易一些。尽管这将取决于设计师如何为您创建此背景。

*谁想玩，我将保留我的示例供下载。
在该示例中，有两个带有png和svg模式的选项，稍后将进行讨论。

好的，现在我们有了一个重复的tile元素（CSS Tiling），而不是一个大的背景图像。

 body { background: url("bg.jpg"); }

干得好，干得好。现在，用户不再需要服务器（586kB）的任何东西（〜24kB）；赢利！

3级我会把你挤到最大

让我们想想，有可能以某种方式改善这种情况吗？嗯，但是图片并不复杂，也许您可以将其超越为矢量？

然后诱惑的恶魔藏起来了。

为了追求最好，我们经常宠坏优秀的莎士比亚

如果没有合理地做到这一点，或者根本没有做到这一点：

您有一个复杂的重复模式。重新绘制它需要n个小时，如果您还通过此任务向设计师施加压力，那么您的业力肯定会减少。
图像中存在阴影或模糊的元素，您不同意拒绝它们。

*这里有必要解释

如果要从Figma或Illustrator导出SVG图形，但不要自己在编辑器中编写代码，则很可能会将模糊或阴影元素插入base64格式的SVG中，这绝不会改善您的性能，因为实际上，这样的文件可能比模拟jpg格式重。

始终检查提供的内容。当然，这些元素中的某些元素也可以使用标签filter，use，object ...用代码创建，但是要与它们一起使用，您需要非常精湛的技能。

好的，让我们创建一个SVG，看看会发生什么。

*为了实验的纯正，显示的图像未使用第三方实用程序压缩，并使用PhotoShop，Illustrator和Avocode以100％的质量保存。

好的，我们的svg小于原始版本的jpg / png。

这并不奇怪，因为在其中只留下了我们看到的基本颜色，而不留下那些出现在具有模糊效果的对象交界处的颜色。

png / jpg文件大小之间的差异似乎并不十分明显，并且只有在图片较大时才开始起作用。

*我更喜欢png，并将背景色设置为background-color属性，但这是来自任务的。

我有点困惑，从svg创建的png / jpg小于SVG的大小（甚至使用SVGO清除了系统垃圾（pattern-bg_cleared.svg））

但是后来，我突然意识到，如果我想减小/增加手机或电视的背景图块的大小，这将需要连接新的模式（pattern-bg_min），并且SVG将保持不变（始终为15kB），并且不会模糊观察到的

这是一个重要的优点，特别是如果用户使用昂贵的手机以高分辨率查看页面，而布局设计者则支持Google Page Speed在st头出现之前就将所有图形串起来。这是保存=）

 body { background-image: url(picture.svg); }

看起来很熟悉。

好，复杂。假设主体将包含在关键CSS中的样式，然后让我们直接在样式中呈现矢量。 *为了不使页面乱丢垃圾，我将采用其他模式，即较小的模式。

 body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }

有很多CSS，但是它停止工作了。

因此，现在有必要对所有这些进行正确编码。仅Webkit浏览器支持未加密的SVG插入。谢谢Julia Bukhvalova，他提供了有用的编码资源，将为我们提供帮助。

 body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }

SVG如何用CSS打包的示例示例。

光标是SVG

一切似乎都很好，但是我确定我会在网站的所有页面上使用此模式吗？当然，必须将其放入关键CSS中，或者在通常的情况下-插入CSS会更正确，并希望浏览器对其进行缓存？也许都一样，您只能在某些页面上连接它吗？聪明的人说，放置在HTML中的代码由浏览器更快地收集，并且在渲染速度方面具有更高的优先级。这么多问题...您必须尝试。

4级，我将所有果汁榨干

首先，我们将创建一个svg元素，其高度和宽度为室外机的100％，以便其占用我们放置该容器的任何容器。

 <svg width="100%" height="100%"> </svg>

要创建模式，我们需要将其放入svg defs（定义）标记中，例如：

 <svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>

已经不错，那么您需要添加属性，我们可以借助这些属性与模式进行交互并以某种方式对其进行调用。

 <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>

我们将给它一个标识符，以便以后可以引用它，还将指示X和Y引用的起始坐标，我们在图形编辑器中设置的宽度和高度，设置ViewBox的范围（可以从完成的svg中获取它）

与主题有关的一些内容，关于ViewBox

我真的很喜欢Amelia Wattenberger https://wattenberger.com/guide/scaling-svg的可视化ViewBox SVG的缩放比例和坐标的示例

...，并将patternUnits属性设置为userSpaceOnUse（这定义了一个坐标系，您可以在MDN上了解更多信息）

简而言之，如果patternUnits =“ userSpaceOnUse”，则SVG画布上的形状将完全填充有模式图块。 如果最后一个图块的长度或宽度都不完全适合，则将其修剪掉。

现在我们需要确定将要重复的图像

 <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>

一切准备就绪，仍然需要在特定对象上调用我们的图案，例如，创建一个矩形区域进行填充。

 <svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>

您会看到fill属性（通常包含填充色的内容现在指向包含我们新定义的模式标识符的URL：fill =“ url（＃pattern-bg）”）。

我们重复的模式在宽度上占据了所有空间，但我也希望在高度上一切都会占据。为此，将高度为100vh的svg包裹起来；

 <div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>