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 控制图片的样式！
