css的背景

导读
通过css背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色，背景图片、背景平铺、背景图片的位置、背景图片啊固定等

1.背景颜色

background-color属性定义了元素背景颜色

background-color:颜色值;

一般情况下元素 背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色

2.背景图片

background-image属性描述颜色背景图，实际开发常见的logo或装饰性的小图片，优点是非常便于控制位置`

background-image：none | url（url）

参数值	作用
none	无背景图片
url	使用绝对或相对地址指定的图像

3.背景平铺

如果需要html页面对背景图像进行平铺，可以使用background-repeat属性

background-repeat：repeat（平铺）
background-repeat：no-repeat（不平铺）
background-repeat：repeat-x（横向平铺）
background-repeat：repeat-y（纵向平铺）

4.背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position：x  y；

注明：x y是指坐标。可以使用方位名词或者精确单位、

参数值	说明
length	百分数 由浮点数字和单位标识符组成的长度值
position	top center bottom left center right 方位名词

5. 背景图片位置

1.参数是方位名词

• 如果指定的值都是方位名词，则两个值的前后顺序无关，比如left top和top left效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

• ，那么第一个肯定是x坐标，第二个是y坐标
• 如果指定一个值，那该值一定是x坐标，另一个个默认垂直居中

3. 混合单位

-如果使用的是混合单位，第一个值是x坐标，第二个值是y坐标。

6. 背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment:scroll(背景图像随着对象内容滚动)| fixed（背景图像固定）

7.背景复合性写法

为了简化代码，可以将属性合并简写在同一个属性background中
这个属性没有固定的顺序要求，不过一般习惯约定顺序：
background：背景颜色、背景图片地址、背景平铺、背景图片位置

background：transparent url（image.jpg） repeat-y  fixed  top

8.背景色半透明

background：rgba（0，0，0，0.3）（最后一个值可以写成.3）

注明：最后一个参数是alpha，取值范围在0~1之间

• 背景半透明是指盒子背景半透明，内容不受影响

背景总结图：