Background

Position 和 Size 写法和顺序是固定的

.box {
  background: <image> <position> / <size>;
}

Background Image

可以是图片也可以是渐变色

Background Position

.box {
  background-position: <x> <y>;
}

X:px

Y:px

当值为百分比时，orgin 并不是固定的，百分比指定的不仅是容器同时也是图片的位置。

缺省值为 center 也就是 50%

X:%

Y:%

left

center

right

top

center

bottom

值也可以为 3-4 个，分别用来定义起始位置和偏移位置，组合比较复杂。

mdn

.box {
  background-position: <x> <offset> <y> <offset>;
}

// 此时坐标只能是关键字
// 偏移在哪个关键字的后面就是谁的偏移

Background Size

这个值是用来设置背景图片的尺寸的，和容器无关

100px auto

200px auto

33% auto

cover

contain

Background Repeat

Background Color

Background Clip

用来设置背景的可填充范围

.box {
  background-clip: border-box; // 默认值
  background-clip: padding-box;
  background-clip: content-box;
  background-clip: text; // 实验性
}

Hello world

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Background Origin

用来设置背景的起始位置

.box {
  background-origin: border-box;
  background-origin: padding-box; // 默认值
  background-origin: content-box;
}

clip 和 origin，当区域不相同时的效果

.box {
  background-clip: border-box;
  background-origin: padding-box;
  background-position: left top;
  background-repeat: repeat;
}

Background Attachment

.box {
  background-attachment: fixed;
  background-attachment: local;
  background-attachment: scroll; // 默认值
}

// bg-fixed 基于视口固定，有视差效果
// bg-local 基于视口滚动，相对容器也滚动
// bg-scroll 基于视口滚动，相对容器固定