一个元素可以使用background来设置他的背景特性,background是一个复合的属性,包括了8个子属性。

background-color

background-color用于定义元素的背景颜色,值可以是具体的十六进制颜色值#dedd6f,可以是rgb颜色值rgb(222, 221, 111),或者直接用颜色对应的英文表示gray,甚至是用关键字transparent来表示透明的颜色。

1
2
3
4
5
6
7
8
9
.yellow {
background-color: #dedd6f;
}
.gray {
background-color: gray;
}
.tran {
background-color: transparent;
}

background-color

background-image

background-image用来定义元素的背景图像,可以通过url(...)来引入图片,也可以设置为none表示背景为空,还可以设置多张背景且中间用逗号隔开,写到前面的图片将会覆盖写到后面的。

1
2
3
4
5
6
7
8
9
10
11
.url {
background-image: url(../images/cow.png)
}
.none {
background-image :none;
}
.muliple {
background-image: url(../images/penguin.jpg), url(../images/cow.png);
background-repeat: no-repeat;
background-size: 81%;
}

background-image

background-repeat

background-repeat定义了背景图像将以何种方式进行平铺。必须先指定background-image属性。如果设置2个属性,那么第一个用于横向,第二个作用于纵向。如果提供一个参数,则用于横向和纵向。其中,repeat-xrepeat-y只能单独使用。

  • repeat-x:横向平铺
  • repeat-y:纵向平铺
  • repeat:横向和纵向都平铺
  • no-repeat:不平铺
  • round:背景图像自动缩放直至适应填充满整个容器
  • space: 背景图像按照相同的间距平铺直至适应填充满整个容器或某个方向
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.repeat-x {
background-repeat: repeat-x;
}
.repeat-y {
background-repeat: repeat-y;
}
.repeat {
background-repeat: repeat;
}
.no-repeat {
background-repeat: no-repeat;
}
.round {
background-repeat: round;
}
.space {
background-repeat: space;
}
.round-space {
background-repeat: round space;
}
.space-round {
background-repeat: space round;
}

background-repeat

background-size

background-size定义了背景图像的尺寸,可以用关键字来定义。contain按照图片比例将背景图像等比缩放到完全适应容器,而cover是图像缩放到完全覆盖区域为止。也可以用长度值或者百分比值来设置。如果设置了2个参数,则分别表示横向和纵向。如果只设置了一个值,那表示横向宽度,纵向为auto.

1
2
3
4
5
6
7
8
9
10
11
12
13
.contain {
background-size: contain;
}
.cover {
background-size: cover;
}
.size-demo .w100 {
background-size: 100px;
background-image: url(../images/cow.png);
}
.rate5080 {
background-size: 50% 80%;
}

background-size

background-position

background-positioin定义了背景图像在容器里的显示位置,可以用关键字topleftrightbottomcenter等来表示,当用1个参数的时候设置的时候,另一个方向默认是center。当用2个关键字来设置的时候,和书写顺序无关。另外还可以用具体数值和百分比来设置,用这些方式来设置的时候第一个参数表示横向,第二个是纵向。如果只有一个参数,则表示横向,纵向默认是居中。

1
2
3
4
5
6
7
8
9
10
11
12
.position-demo .top {
background-position: top;
}
.position-demo .bottom-right {
background-position: bottom right;
}
.position-demo .w20h40 {
background-position: 20px 40px;
}
.position-demo .p20 {
background-position: 20%;
}

background-position

background-attachment

background-attachment控制背景图像在可视区或元素内如何滚动。fixed是相对可视区域进行定位,背景图像相对于可视区域进行定位,不随元素滚动而滚动。scroll背景图像将在元素区域内固定,不会随着元素内容的滚动而滚动。local背景图像相对于元素内容占据的区域进行定位,当元素内容滚动的时候,背景图像随之滚动。

1
2
3
4
5
6
7
8
9
10
.attachment-demo .fixed {
background-attachment: fixed;
background-position: bottom;
}
.attachment-demo .scroll {
background-attachment: scroll;
}
.attachment-demo .local {
background-attachment: local;
}

background-attachment

background-origin

background-origin规定了背景图像相对于盒模型的哪个区域来定位,对背景颜色无效。content-box相对于内容区域定义,padding-box相对于内边距区域定位,border-box相对边框区域定位

1
2
3
4
5
6
7
8
9
.origin-demo .content {
background-origin: content-box;
}
.origin-demo .padding {
background-origin: padding-box;
}
.origin-demo .border {
background-origin: border-box;
}

background-origin

background-clip

background-clip指定背景向外裁剪的区域。padding-box从padding区域(不含padding)开始向外裁剪背景。border-box从border区域(不含border)开始向外裁剪背景。
content-box从content区域开始向外裁剪背景。

1
2
3
4
5
6
7
8
9
.clip-demo .content {
background-clip: content-box;
}
.clip-demo .padding {
background-clip: padding-box;
}
.clip-demo .border {
background-clip: border-box;
}

background-clip