一个元素可以使用 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;
}

younghz的Markdown库

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%;
}

younghz的Markdown库

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;
}

younghz的Markdown库

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%;
}

younghz的Markdown库

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%;
}

younghz的Markdown库

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;
}

younghz的Markdown库

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;
}

younghz的Markdown库

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;
}

younghz的Markdown库