背景系列

背景图片的大小（background-color）

1.确定值 background-size:300px 400px;

以这种方式设置图片背景一定要注意背景图片宽高比和盒子宽高比是否一致，要不然可能会导致图片失真变形

2.百分比：参照父容器可以防止内容区域的百分比

3.contain  按照比例调整图片的大小，使图片自适应整个元素的背景区域，使图片全部包含在容器内部，可能会有留白

4.cover与contain相反的是cover会造成背景图片的溢出，图片的某些区域不在容器内部

背景平铺(background-repeat)

1.no-repeat:不平铺

2.space 不会对图片进行缩放 只会在图片之间产生相同的间隙值

3.round 会将图片进行缩放之后再平铺

背景固定（background-attachment）

在滚动页面的时候

1.fixed 背景图片不会随着一起滚动，会有视觉差

2.local  背景图片随着页面滚动而滚动

3.scroll 同上

在滚动容器内容

1.loacl   会随着容器内容的滚动而滚动

2.scroll 不会随着容器内容的滚动而滚动

背景偏移的原点（background-origin）

border-box

content-box

背景剪裁（background-clip）

使用情况：背景图片比较小，盒子比较大，这两个属性搭配使用，再添加一个padding

border-box

content-box

线性渐变（background:linear-gradient(方向 开始颜色，颜色1 位置1，位置2 位置2））

线性渐变

径向渐变(background:radial-gradient(形状 大小 方向，颜色1 位置 ，颜色2 位置））

径向渐变

重复渐变（ repeating-radial-gradient ）

重复渐变