如何在 CSS 中插入图像

在 CSS 中插入图像非常简单，只需要使用 background-image 属性即可。

语法

selector {
  background-image: url("image.png");
}

其中，selector 为需要添加背景图的元素选择器，url() 中填写图像的路径。

图像路径

图像路径可以是绝对路径或相对路径。如果图像与 HTML 文件在同一目录下，可以使用相对路径。

相对路径

相对路径有两种形式：相对于当前 CSS 文件的路径和相对于当前 HTML 文件的路径。

相对于当前 CSS 文件的路径示例：

selector {
  background-image: url("../images/image.png");
}

其中，../ 表示返回上一级目录，再进入 images 目录下。

相对于当前 HTML 文件的路径示例：

selector {
  background-image: url("images/image.png");
}

这里的路径不需要加 ../，因为 CSS 文件已经被 HTML 文件引用，所以可以直接访问同级目录下的 images 目录。

绝对路径

绝对路径指的是包含了完整 URL 地址的路径，可以通过开头的 http、https 来判断。

selector {
  background-image: url("https://example.com/images/image.png");
}

图像重复与填充

当背景图像大小小于容器大小时，可以使用 background-repeat 和 background-size 属性来改变图像的填充方式。

background-repeat

background-repeat 用于设置背景图像应如何重复，常用的属性值包括：

• repeat：默认值，水平方向和垂直方向都重复平铺图像；
• repeat-x：水平方向重复平铺图像，垂直方向不重复；
• repeat-y：垂直方向重复平铺图像，水平方向不重复；
• no-repeat：图像不重复，只出现一次；

selector {
  background-repeat: repeat-x;
}

background-size

background-size 用于设置背景图像的大小，常用的属性值包括：

• cover：图像在保持比例的同时放大或缩小，覆盖容器；
• contain：图像在保持比例的同时放大或缩小，完全包含在容器内；
• <length>：使用具体的像素值或百分比进行设置；

selector {
  background-size: cover;
}