svg使用图片作为背景图_如何使用SVG模式作为背景

svg使用图片作为背景图

与CSS拼贴相比，SVG模式提供了一种在网页上重复背景图像的更加灵活的方法。 让我们看看为什么会这样，以及如何使用它们。

您将学到什么

本教程有视频和文本两种形式，以下是您将学到的内容的细分：

1. 我们将从研究更熟悉CSS切片方法开始。
2. 然后，我们将创建几个SVG模式，并在学习过程中学习正确的语法。
3. 我们将比较这两种方法，并讨论其优缺点。
4. 接下来，我们将看一些可用于创建SVG模式的工具。
5. 最后，我们将检查浏览器对SVG的支持。

观看截屏

1. CSS平铺

让我们从检查CSS拼贴开始，这是在背景上重复图像的更传统的方法。 这个想法很简单：我们将URL传递到要覆盖的元素的background属性。 URL指向图像文件，在这种情况下为PNG文件。 默认情况下，我们的图像会沿两个轴重复。

body {
    background: url("cuadros.png");
}

看起来是这样的：

2. SVG模式

现在让我们看一下SVG模式-初次遇到时，有些东西很难理解。 我们将从手工编写示例开始。

手工编码SVG

从SVG开始

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

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