全面解读CSS中的background属性

发表时间: 2024-03-13 09:57

background 是一种 CSS 简写属性，可以在一次声明中定义一个或多个属性： background-clip 、 background-color 、 background-image 、 background-origin 、 background-position 、 background-repeat 、 background-size ，和 background-attachment 。因此，background属性的全写应为：

background: <bg-color> <bg-imge> <position/bg-size> <bg-repeat> <bg-origin> <bg-clip> <bg-attachment>

当然，实际使用过程中，我们很难将多个属性值共写为在一起。因为这样既不美观，又容易把自己搞晕。所以，一般我们单独使用background属性时，一般只使用了其中了1~3属性。示例如下：

/* 使用 <background-color> */background: green;/* 使用 <bg-image> 和 <repeat-style> */background: url("test.jpg") repeat-y;/* 使用 <box> 和 <background-color> */background: border-box red;/* 将背景设为一张居中放大的图片 */background: no-repeat center/80% url("../img/image.png");

为了更加全面的了解并熟练使用background的相关属性，以下对较为常用的几个属性进行详细说明。

01 background-attachment

该属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。它的属性值及对用关系见下表：

属性值	描述
scroll	默认值。背景图片随着页面的滚动而滚动
fixed	背景图片不会随着页面的滚动而滚动
local	背景图片会随着元素内容的滚动而滚动
initial	使用该属性的默认值
inherit	指定属性值从父元素继承

02 background-clip

该属性设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。它的属性值及对用关系见下表：

属性值	描述
border-box	默认值。背景绘制在边框（border）方框内，但在边框下层
padding-box	背景延伸至内边距（padding）外沿，但不会绘制在边框处
content-box	背景被剪裁至内容区（content）外延

图1 background-clip属性三个值的效果对比

03 background-color

该属性会设置元素的背景色，属性的值为颜色值或关键字（transparent 、inherit）二者选一。

04 background-image

该属性用于为一个元素的背景设置一个或多个背景图像。其中，元素的背景是元素的总大小，包括填充和边界，但不包括边距。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。它的属性值及对用关系见下表：

属性值	描述
url（‘URL’）	图像的URL
none	默认值。无图像背景显示
linear-gradient（）	创建一个线性渐变的图像
radia-gradient（）	创建一个径向渐变的图像
repeating-linear-gradient（）	创建重复的线性渐变图像
repeating-radial-gradient（）	创建重复的径向渐变图像

TIPS：若该属性填入两个及以上的图像，那么第一个图像为最接近用户的图像，即第一个图像的层级（z-index）最高

05 background-origin

该属性规定了指定背景图片background-image属性的原点位置背景相对区域。但当background-attachment为fixed时，该属性将不起作用。它的属性值及对用关系见下表：

属性值	描述
border-box	背景图片的摆放以border区域为参考
padding-box	背景图片的摆放以padding区域为参考
content-box	背景图片的摆放以content区域为参考

图2 background-origin三个属性值的对比效果图