CSS设置背景图片：简单易懂教程

DY/KS免费对接

摘要：本文将详细介绍CSS设置背景图片：简单易懂教程，为读者提供基本背景信息和引出读者的兴趣。

图片：

一、设置单一背景图片

在CSS中设置单一背景图片很简单。您只需在样式表中指定背景图像的URL，然后添加到相关的CSS选择器中。例如，以下代码片段为body元素指定一个背景图像：

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

此时该背景图片将被平铺到整个body元素的背景中。

如果希望设置一些特殊的背景属性，可以使用background-position、background-repeat、background-attachment等属性，根据实际情况进行设置。

二、设置不重复的背景图片

背景图片的重复是默认的。如果您只希望在页面上添加一次背景图片，可以使用background-repeat:none属性来实现。例如，下面的样式将为元素设置一张不重复背景图片：

	body {
 		background-image: url("background.jpg");
 		background-repeat: no-repeat;
	}

当然，您也可以选择background-attachment属性，让该元素的背景不随着滚动而移动，常见的值有”scroll”、”fixed”、”local”。

三、将图像放在固定位置

background-position属性可以让图像在元素中特定的位置。这个属性接受多个单位以及单词性的值，例如指定像素、百分比、单词”left”、”center”、”right”，”top”、”center”、”bottom”。例如，以下的样式将背景图片定位在浏览器窗口里顶部和居中：

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

四、将多个图像合并

CSS3提供了多背景图片的功能，该功能允许您使用多个背景图像为单个元素指定多个背景层。每个层可以有自己的背景大小、背景位置和背景重复属性。只需在background-image属性中使用逗号分隔值即可，在这个样例中，我们将在元素的右下方添加另一个背景图像：

	body {
 		background-image: url("background1.jpg"),
			       url("background2.jpg");
 		background-position: center top;
	}

需要注意的是，在多个背景图像中，先指定的图像会在元素的顶部呈现，指定的后来的图像会覆盖在之前指定的图像之上。