最全css设置图片方法！忘记必看

背景图片大小

在CSS中，background-size属性用于指定背景图像的大小。它可以接受多种不同的属性值，用于控制背景图像的尺寸和如何适应背景区域。

以下是background-size属性常用的属性值和它们的意义：

1. auto: 这是默认值，背景图像保持其原始尺寸。
2. cover: 背景图像尽量铺满整个背景区域，可能会裁剪部分图像以保持宽高比。
3. contain: 确保整个背景图像完全显示在背景区域内，可能会留有空白区域。
4. length values: 可以使用具体的长度值（如像素或百分比）来指定背景图像的宽度和高度。
5. percentage values: 也可以使用百分比来指定背景图像相对于背景区域的尺寸，例如"50% 50%"表示背景图像的宽度和高度都是背景区域的一半。

通过使用这些属性值，可以灵活地控制背景图像的大小和适应方式，以实现各种视觉效果。

背景图片重复

在CSS中，background-repeat属性用于指定背景图像在元素背景中的重复方式。该属性有四个可能的取值：

repeat ：背景图像将在水平和垂直方向上重复。
repeat-x ：背景图像将在水平方向上重复，而在垂直方向上不重复。
repeat-y ：背景图像将在垂直方向上重复，而在水平方向上不重复。
no-repeat ：背景图像不会重复，它只会出现一次。

例如，如果你想让背景图像在水平方向上重复，但在垂直方向上不重复，你可以这样设置：

background-repeat: repeat-x;

这样背景图像就会沿着水平方向重复铺满整个元素背景，而不会在垂直方向上重复。这个属性可以帮助你控制背景图像在元素背景中的表现方式，从而实现各种不同的视觉效果。

背景图片的位置

在CSS中，background-position属性用于指定背景图像的位置。该属性允许你根据水平和垂直方向设置背景图像的位置。可以使用关键字或百分比来指定位置。

例如，如果你希望背景图像位于元素的左上角，你可以这样设置：

background-position: left top;

如果你希望背景图像位于元素的右下角，你可以这样设置：

background-position: right bottom;

你也可以使用百分比来指定背景图像的位置。例如，如果你想将背景图像水平居中并垂直靠顶部，你可以这样设置：

background-position: 50% 0%;

这表示将背景图像水平居中（50%），并将其垂直放置在元素顶部（0%）。

此外，你还可以结合多个关键词或百分比来指定位置。例如，如果你想将背景图像水平居中并垂直居中，你可以这样设置：

background-position: center center;

这表示将背景图像水平和垂直都居中放置。

通过使用background-position属性，你可以轻松地控制背景图像在元素背景中的位置，从而实现各种不同的视觉效果。

指定元素设置背景图片

在CSS中，background-image属性用于指定元素的背景图片。通过设置background-image，你可以为元素添加一个或多个背景图像。

使用background-image属性时，你需要提供一个有效的图片路径或者URL。可以使用相对路径或绝对路径来引用图片，也可以使用URL来引用远程图片。

以下是一些示例：

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

上述代码将元素的背景图片设置为image.jpg，该图片位于与当前CSS文件相同的目录下的path/to文件夹中。

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

上述代码将元素的背景图片设置为远程URL上的image.jpg图片。

你还可以使用多个background-image属性来指定多个背景图像。这些背景图像会按照声明的顺序叠加在一起。例如：

.background {
  background-image: url("image1.jpg"), url("image2.jpg");
}

上述代码将元素的背景图片设置为image1.jpg和image2.jpg两张图片。

值得注意的是，如果背景图片无法加载或不存在，那么元素将显示默认的背景颜色或其他背景属性。

通过使用background-image属性，你可以为元素添加各种视觉效果的背景图片，从而实现更丰富的设计。

伪元素设置背景图片

在CSS中，可以使用伪元素(::before或::after)来为元素添加背景图片。通过使用伪元素，你可以在元素的内容之前或之后插入一个虚拟元素，并为其设置背景图片。

下面是一个使用伪元素添加背景图片的示例：

.element::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-image: url("image.jpg");
}

在上述代码中，我们创建了一个名为.element的元素，并使用伪元素::before为其添加了一个背景图片。content属性用于指定伪元素的内容为空字符串，display属性设置为block，以使其成为块级元素。width和height属性定义了伪元素的宽度和高度。最后，background-image属性指定了伪元素的背景图片。

通过调整伪元素的位置和尺寸，你可以控制背景图片在元素中的显示方式。同时，你还可以使用其他的背景属性（如background-repeat、background-position等）来进一步控制背景图片的呈现效果。

需要注意的是，伪元素的背景图片默认是相对于伪元素本身的大小进行显示，而不是相对于父元素。因此，在使用伪元素添加背景图片时，你需要根据实际需求设置伪元素的尺寸和定位。

使用伪元素添加背景图片可以为元素增加额外的装饰效果，比如为按钮添加箭头图标、为文本标题添加背景图案等。这种方法常用于在不改变文档结构的情况下，为元素增加样式和视觉效果。