CSS 中的插图是什么

在 CSS 中，插图通常是指通过 background-image 属性或 ::before、::after 伪元素来添加的图像。

background-image 属性

通过 background-image 属性可以给一个元素添加背景图像，其用法如下：

selector {
  background-image: url(path/to/image.jpg);
}

其中，url 函数中填写的是图像的路径。除了常见的 jpg、png、gif 等图像格式外，SVG 文件也可以作为 background-image 使用。

::before、::after 伪元素

::before 和 ::after 伪元素是在元素的内容之前和之后添加的一个虚拟的元素，它们可以用来插入内容、添加样式等。我们可以使用 content 属性来为这两个伪元素设置内容，同时通过 background-image 来设置图像。

selector::before {
  content: '';
  background-image: url(path/to/image.jpg);
}

selector::after {
  content: '';
  background-image: url(path/to/image.jpg);
}

通过在 content 中设置一个空字符串，插图就可以正常显示了。

需要注意的是，伪元素默认是行级元素，如果要让伪元素成为块级元素或行内块级元素，需要为其设置 display 属性。

selector::before {
  content: '';
  display: block;
  background-image: url(path/to/image.jpg);
}

图像的平铺方式

除了可以设置单个图像作为背景或插图外，还可以使用 background-repeat 属性来指定图像的平铺方式。常见的平铺方式有以下几种：

• repeat：在水平和垂直方向上重复平铺图像；
• repeat-x：仅在水平方向上重复平铺图像；
• repeat-y：仅在垂直方向上重复平铺图像；
• no-repeat：不重复平铺图像，只显示一次。

selector {
  background-image: url(path/to/image.jpg);
  background-repeat: repeat-x;
}

图像的定位

我们也可以使用 background-position 属性来对插图进行定位，其用法如下：

selector {
  background-image: url(path/to/image.jpg);
  background-position: center center;
}

其中，background-position 允许使用关键字、百分比和长度单位来指定图像的位置。常见的关键字有 left、right、top、bottom 和 center 等。

总结

通过 background-image 属性和伪元素的技巧，我们可以在 CSS 中方便地添加插图，并且可以对插图进行平铺和定位等操作。掌握了这些技巧，我们可以更好地呈现出网页设计效果。