下面我将为你详细讲解“CSS的background属性及CSS3的背景图片设置总结”的攻略。

CSS的background属性及CSS3的背景图片设置总结

一、CSS的background属性

background属性用于为元素设置背景，可以同时设置背景图片、背景颜色、背景定位等属性。其基本语法如下：

background: [颜色] [图片] [重复方式] [位置] [固定位置];

其中，[颜色]表示背景颜色，可以是具体颜色值或颜色关键字；[图片]表示背景图片，可以是图片链接或none；[重复方式]表示背景图片的重复方式，可以是repeat(默认值)、no-repeat、repeat-x或repeat-y；[位置]表示背景图片的位置，可以使用关键字left、center、right和top、center、bottom，也可以指定具体像素值或百分比值；[固定位置]表示是否固定背景图片的位置，可以是fixed或scroll(默认值)。

例如，以下代码会为一个具有宽度和高度的div元素设置蓝色背景、一张重复显示的图片、图片居中，在顶部固定不动的背景：

div {
    width: 500px;
    height: 300px;
    background: blue url("example.png") repeat center top fixed;
}

二、CSS3的背景图片设置

在CSS3中，有一些新的属性可以用于控制背景图片的表现，例如background-size、background-origin、background-clip等。

1. background-size

background-size属性用于控制背景图片的尺寸大小，其基本语法如下：

background-size: [宽度] [高度];

其中，[宽度]可以是像素值、百分比值、关键字cover(自动缩放背景图片以覆盖整个元素)和contain(自动缩放背景图片以适应整个元素)；[高度]同理。

例如，以下代码会为一个具有宽度和高度的div元素设置一张背景图片，使其自动缩放以适应整个元素：

div {
    width: 500px;
    height: 300px;
    background-image: url("example.png");
    background-size: contain;
}

2. background-origin

background-origin属性用于控制背景图片的定位起点，其基本语法如下：

background-origin: [内容盒子] | [填充盒子] | [边框盒子];

其中，[内容盒子]表示背景图片的定位起点为元素内容区域，[填充盒子]表示背景图片的定位起点为元素填充区域（即内容区域加上内边距），[边框盒子]表示背景图片的定位起点为元素边框区域（即内容区域加上内边距和边框宽度）。

例如，以下代码会为一个具有宽度和高度的div元素设置一张背景图片，定位起点为元素填充区域：

div {
    width: 500px;
    height: 300px;
    background-image: url("example.png");
    background-origin: padding-box;
}

3. background-clip

background-clip属性用于控制背景图片的裁剪方式，其基本语法如下：

background-clip: [内容盒子] | [填充盒子] | [边框盒子];

其中，[内容盒子]表示背景图片将显示在元素内容区域内，[填充盒子]表示背景图片将显示在元素填充区域内（即内容区域加上内边距），[边框盒子]表示背景图片将显示在元素边框区域内（即内容区域加上内边距和边框宽度）。

例如，以下代码会为一个具有宽度和高度的div元素设置一张背景图片，裁剪方式为元素填充区域：

div {
    width: 500px;
    height: 300px;
    background-image: url("example.png");
    background-clip: padding-box;
}

结语

以上就是CSS的background属性及CSS3的背景图片设置总结的内容。需要注意的是，不同浏览器的支持程度可能不同，请根据实际情况选择需要使用的属性和值。