1. 设置背景图像

要在网页中使用背景图像，可以使用 background-image 属性。例如，要将页面的主体背景设置为名为 "bg.jpg" 的图像：

div {
  background-image: url("bg.jpg");
}

2. 控制背景图像的尺寸

可以使用 background-size 属性控制背景图像的大小和比例。此属性可以接受长度、百分比或关键字值。

例如，以下样式将使背景图像覆盖整个元素：

div {
  background-image: url("image.jpg");
  background-size: cover;
}

3. 控制背景图像的重复方式

可以使用 background-repeat 属性控制背景图像的重复方式。

以下是一些常用的 background-repeat 值：

repeat：默认值，图像会在水平和垂直方向上重复出现；
repeat-x：图像只在水平方向上重复出现；
repeat-y：图像只在垂直方向上重复出现；
no-repeat：图像只显示一次，不重复出现。

例如，以下样式将使背景图像只在水平方向上重复：

div {
  background-image: url("image.jpg");
  background-repeat: repeat-x;
}

4. 控制背景图像的位置

可以使用 background-position 属性控制背景图像的位置。

以下是一些常用的 background-position 值：

left top：背景图像放置在容器的左上角；
center top：背景图像水平居中，垂直靠上放置；
right top：背景图像放置在容器的右上角；
left center：背景图像垂直居中，水平靠左放置；
center center：背景图像水平和垂直都居中放置；
right center：背景图像垂直居中，水平靠右放置；
left bottom：背景图像放置在容器的左下角；
center bottom：背景图像水平居中，垂直靠下放置；
right bottom：背景图像放置在容器的右下角。

例如，以下样式将使背景图像位于元素的中心：

div {
  background-image: url("image.jpg");
  background-position: center center;
}

5. 设置元素的背景颜色

可以使用 background-color 属性设置元素的背景颜色。此属性可以接受颜色名称、十六进制值或 RGB 值。

例如，以下样式将使元素的背景颜色为蓝色：

div {
  background-color: blue;
}

6. 设置背景颜色与背景图像的混合模式

可以使用 background-blend-mode 属性控制背景颜色和背景图像的混合模式。此属性可以接受混合模式名称或函数。

以下是一些常用的混合模式：

normal：默认值，保持背景颜色和背景图像的原始颜色；
multiply：将背景颜色与背景图像相乘；
screen：将背景颜色与背景图像进行筛选；
overlay：将背景颜色与背景图像进行叠加；
darken：保留较暗的颜色，将其余部分变为透明；
lighten：保留较亮的颜色，将其余部分变为透明；
color-dodge：减少背景颜色的饱和度，使背景图像变亮；
color-burn：增加背景颜色的饱和度，使背景图像变暗；
difference：将背景颜色与背景图像进行比较，显示不同之处。

例如，以下样式将使背景颜色变得更加透明，并通过混合模式使背景图像和背景颜色产生交错效果：

div {
  background-image: url("image.jpg");
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;
}

7. 通过伪元素添加图像

可以使用 content 属性通过伪元素添加图像。这个属性通常与 ::before 或 ::after 伪元素结合使用。例如，以下样式将在元素前添加一个图像：

div::before {
  content: url("image.jpg");
}

8. 对元素的可见部分应用图形效果

可以使用 filter 属性对元素的可见部分应用图形效果，如模糊度、颜色转换等。

以下是一些常用的 filter 值：

blur()：设置模糊半径；
brightness()：设置亮度级别；
contrast()：设置对比度级别；
grayscale()：将元素转换为灰度；
hue-rotate()：旋转元素的色相；
invert()：反转元素的颜色；
opacity()：设置元素的透明度；
saturate()：设置元素的饱和度；
sepia()：将元素转换为深褐色。

例如，以下样式将使元素变得更加模糊：

div {
  filter: blur(5px);
}

9. 控制 `<img>` 标签中图片的缩放方式

可以使用 object-fit 属性控制 <img> 标签中图片的缩放方式。

以下是一些常用的 object-fit 值：

fill：填充整个容器，可能会拉伸图片；
contain：将整个图像调整到容器内，可能会产生空白区域；
cover：将图像调整为覆盖整个容器，可能会裁剪部分图像；
none：不调整大小，显示原始尺寸的图像；
scale-down：根据图像大小和容器大小来决定是 none 还是 contain。如果图像比容器小，则显示原始尺寸的图像，否则根据容器大小进行缩放。

例如，以下样式将使 <img> 标签中的图像等比例缩放，并覆盖整个容器：

img {
  object-fit: cover;
}

10. 控制元素的最大宽度和高度

可以使用 max-width 和 max-height 属性控制元素的最大宽度和高度。这对于避免图像过大并影响页面布局非常有用。

例如，以下样式将限制图像的最大宽度为 500 像素：

img {
  max-width: 500px;
}

总结

在开发网页时，设置图片的样式是非常常见的操作。本文介绍了一些常用的 CSS 属性来控制图片的显示效果，包括设置背景图像、控制背景图像的尺寸和重复方式、设置元素的背景颜色和混合模式、通过伪元素添加图像、对元素的可见部分应用图形效果、控制 <img> 标签中图片的缩放方式以及控制元素的最大宽度和高度。

需要注意的是，不同的浏览器可能会对某些属性的支持程度有所差异，因此在开发时需要进行充分测试和兼容性处理。

希望这篇教程可以帮助您更好地使用 CSS 控制图片的样式！