月份：2022年4月

background

background = [<bg-layer>#,]? <final-bg-layer>

<bg-layer>

bg-layer = <bg-img> || <bg-position> [ / <bg-size>]? || <repeat-style> || <attachment> || <box> || <box>

<final-bg-layer>

final-bg-layer= <background-color> || <bg-image> || <bg-position> [/ <bg-size>]? || <repeat-style> || <attachment> || <box> || <box>

<attachment>

这是背景图单独属性 background-attachment，它的默认值是scroll，表现为在根滚动条下，滚动的时候图片也会滚动，但是如果在元素中，这个背景就会固定住不会随内容滚动。这与local的区别是，local在元素中有滚动条的话，背景会随元素的内容滚动。还有一个值是fixed，它就像贴在根元素上一样，但是显示的大小还是根据元素决定，可以使用padding-top实现高度与宽度与图片比例一致，但总体来说整个可视区域的高度都可以显示到，在移动端适合高比宽大的图片background-size取100% auto，但是两侧显示不到。在PC端适合宽比高大的图片background-size取auto 100%，但是上下显示不全。这已是最大化显示内容的方案，我认为显示不全这一缺点也是这种技术不是非常流行的原因

<box>

box=border-box | padding-box | content-box

它的默认值为border-box，但是对于color来说，它确实是真正的border-box，但是对于图片来说它的初始值是padding-box。

它的属性值是background-clip，但是background-clip中还有一个text的属性，这个属性能够把背景裁剪到字体。

<bg-image>

<bg-image>=<image> | none

<image> = <url> | <gradient>

它的属性名叫做background-image，默认值是none

<bg-position>

它的属性名是background-position，默认值是0% 0%，

bg-position = [top | left | right | bottom | <length-percentage>]

| [left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>]

| [center | [left | right] <length-percentage>] [center | [top | bottom] <length-percentage>]

这里可以找到一种不常用的用法，background-position:right 20px bottom 20px

<bg-size>

属性名是background-size，默认值 auto，代表源图片大小

bg-size=[<length-percentage [0,+无穷]> | auto]{1,2} | cover | contain

<repeat-style>

repeat-style的属性名是background-repeat，默认值是repeat

repeat-style = repeat-x | repeat-y | [repeat | no-repeat | round | space]{1,2}

当有两个值是第一个代表水平方向，第二个代表垂直方向

使用round，如果background-size是15% 15%，它铺六个是90%，铺七个是105，则会铺设7个然后缩小一点，并全部铺完。

如果background-size是16% 16%，它铺六个是96%，铺七个是112%，则他会铺六个，然后撑开一点。

使用space，保持原本的大小，会留出空隙