CSS background属性

基本认识

background是css一个非常重要的部分，background是一种css的简写属性，用于一次性集中定义各种背景属性

背景属性主要包括以下内容

1. background-color 定义背景颜色

   background-color: rgba|hsla|colorhex
   

2. background-image 定义背景图片

   background-image:url(imagePath)
   

3. background-origin 定义指定的背景图片到原点位置的背景相对区

   background-origin: border-box | padding-box| content-box
   

4. background-position为每一个背景图片设置初始位置。这个位置是根据background-origin 定义的位置而定义的

   background-position:center|top|left|right|....
   

5. background-repeat 定义背景图片的重复方式

   background-repeat:repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
   

6. background-size 设置背景图片大小

   background-size:auto|cover|contain|...
   

7. background-attachment 决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。

   background-attachment:fixed|local|scroll
   

background-position

该属性是定义图片位置

主要根据由background-origin所定义的参照物（padding容器，content容器，border容器）进行图片的定位

可以作为该属性的属性值有以下类型

1. 关键字

   center  居中背景图片
   top，bottom，left，right这四个关键字中的一个，用来指定将该图片放在容器的哪一边，而另一个维度会被设置成50%
   例如，设置该属性为top，则会图片顶部会与容器顶部重合，而另一个维度则会是居中，即边缘中央
   

2. 百分比

   在这情况下图片位移的计算如下
   x offset = (容器宽度 - 图片宽度) * x%
   y offset = (容器高度 - 图片高度) * y%
   

3. 数字 + 单位

   x轴：正值图片背景向右移动，负值向左移动
   y轴：正值图片背景向下移动，负值向上移动
   

​ 而该属性可以用一个值，两个值和四个值来设置，分别设置图片到容器四周的距离（具体情况可以参考margin的不同值情况，上右下左，顺时针）

​ 而，若我们想让我们的图片背景居中，则设置该属性值为center就可以了

background-repeat

该属性定义背景图片的重复方式

1. 可以就x轴方向重复 repeat-x
2. 可以就y轴方向重复 repeat-y
3. 也可以x轴,y轴都重复 repeat
4. 也可以不重复图片背景 no-repeat

而重复图片的行为又有不同的方式

1. repeat 图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

2. space 图像尽可能重复，但是不会裁剪背景图片

3. round

   随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px
   

4. no-repeat 不重复背景图片

一个是重复的行为，一个是重复时的效果
一般我们设置图片背景是只需不重复就可以了

background-size

该属性用于设置背景图片的尺寸，可保留其原本的尺寸，也可以将图片进行拉伸或缩放

属性值的类型

1. 关键字

   cover 缩放背景图片以完全装入背景区，可能背景区部分空白
   contain 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
   auto 以背景图片的比例缩放背景图片
   

2. 百分比

   图片宽度 = 容器宽度 * w%
   图片宽度 = 容器高度 * h%
   

3. 数值 + 单位

   不可以为负值
   

我们可以为这个属性设置一个或者两个值

当我们设置一个值时，则设置的是图片的宽度，而高度值则为auto

当我们设置两个值时，则第一个值为图片的宽度，第二个值则为图片的高度

注：若背景颜色没有设置透明或者半透明属性，则无法查看到背景图片