background 是一种CSS 简写，允许您在一个声明中定义一个或多个属性（background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment）是一种财产。因此背景属性的全文将是：
背景： bg-color bg-imgeposition/bg-size bg-repeat bg-origin bg-clip bg-attachment 当然，在实际使用中很难将多个属性值写在一起。因为不好看而且容易晕倒。因此，单独使用背景属性时，通常只使用属性1-3。一个例子是：
/* 使用背景颜色*/background: green;/* 使用背景图像和重复样式*/background: url('test.jpg')repeat-y;/* 使用框和背景颜色*/background: border-box red; /* 将背景设置为居中且展开的图像*/background: no-repeat center/80% url('./img/image.png'); 使背景更具包容性为了帮助您更好地理解和使用它们，请参阅相关属性对一些更常用的属性进行了详细解释。
01 background-attachment
此属性确定背景图像的位置是固定在视口内还是随包含背景图像的块一起滚动。下表显示了属性值和使用关系。
属性值
解释
滚动
默认值。背景图像也会随着页面滚动而滚动。
已修复
页面滚动时背景图片不滚动
当地的
当元素内容滚动时，背景图像也会滚动
最初的
使用该属性的默认值
继承
指定属性值是从父元素继承的
02 background-clip
该属性设置元素的背景（背景图像或背景颜色）是否延伸到边框、内边距框和内容框下方。下表显示了属性值和使用关系。
属性值
解释
边框框
默认值。背景绘制在边框框内，但在其下方
填充盒
背景延伸到padding的外边缘，但没有绘制到边框
内容框
背景被剪裁到内容区域（content）之外
图1 background-clip属性三个值的效果对比
03 background-color
该属性设置元素的背景颜色。属性的值可以是颜色值或关键字（透明、继承）。
04 background-image
该属性用于在元素的背景上设置一张或多张背景图片。这里，元素的背景是元素的总大小，包括内边距和边框，但不包括边距。默认情况下，背景图像放置在元素的左上角，并且垂直和水平重复。下表显示了属性值和使用关系。
属性值
解释
网址（'网址'）
图片网址
没有任何
默认值。图像背景不显示
线性梯度()
创建线性渐变图像
径向渐变()
创建径向渐变图像
迭代线性梯度()
创建重复的线性渐变图像
重复径向渐变()
创建重复的径向渐变图像
提示：如果在此属性中输入多个图像，则第一个图像将是最接近用户的图像。也就是说，第一张图像具有最高级别（z-index）。
05 background-origin
该属性指定指定背景图像的background-image属性的原点位置和背景相对区域。但是，如果背景附件是固定的，则此属性无效。下表显示了属性值和使用关系。
属性值
解释
边框框
背景图像的放置是根据边框区域完成的。
填充盒
背景图像的放置是根据填充区域完成的。
内容框
背景图像放置基于内容区域。
图2 background-origin的三个属性值对比
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。