CSS背景（background）篇

1. background概述

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

属性	描述
background-color:	背景颜色
background-image:	背景图片地址
background-repeat:	是否平铺
background-position:	背景位置
background-attachment:	背景固定还是滚动

2. background-image设置背景图

• background-image:url("imgs/main_bg.jpg"),
• 如果属性在css文件中设置，而图片不在css文件夹中，那么路径前面加上返回上一层文件夹 …/

3. background-repeat背景图重复

• 默认情况下，背景图会铺满整个页面，背景图大小不够铺满整个页面时，背景图会在横坐标和纵坐标中进行重复；

属性	属性值	描述
background-repeat:	repeat	横、纵坐标重复（默认值）
	no-repeat	不重复
	repeat-x	只在x轴重复、y也一样

4. background-size设置背景图的尺寸

属性	属性值	描述
background-size:	contain	图片要完整的显示在指定的区域，不能改变图片的比例,可能有部分空白区域
	cover	图片撑满整个指定区域，而且比例不变，可能会溢出
	100%	横向撑满，纵向按比例缩放
	100% 100%	横、纵向撑满，图片比例可能会发生变化
	x y	可以设置数值代表横、纵向的像素尺寸

5. background-position设置背景图位置

预设值： left、bottom、right、top、center（居中）

属性	属性值	描述
background-position:	center	背景图横、纵向居中
	center top	横向居中，纵向靠上
	center bottom	横向居中，纵向靠下
	left center	横向靠左，纵向居中

注：也可以用数值或百分比如background-position：10px 10px 表示横、纵坐标离左边、上边边框的距离；

6. background-attachment设置为是否固定

属性	属性值	描述
background-attachment:	fixed	背景图相对于视口
	scroll	不固定（默认值）

7. 6. 背景图和背景颜色混用

• 当背景图覆盖不了盒子时，空白的地方可以用背景颜色填充，可以选用背景图边缘的颜色作为背景颜色

8. 速写（简写）background

• background：url(“imgs/main.jpg”) no-repeat 50% 50%/100% fixed #000
  顺序为设置图片、不重复、位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中间加/隔开。
• 有些属性可以不写，不写会按默认值处理
• background：背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸

9. 有含义的背景图，需要在元素里添加文字

• 在网速不好的时候，加载不出来CSS属性的时候，会显示文字；
• 在网速正常的时候，能加载CSS属性，则显示图片；
• 所以书写代码的时候需要添加文字，然后隐藏文字；
• 方法一.文本缩进：text-indent：px，文本不换行：white-space：nowrap；把文本挤出到盒子外面，然后隐藏溢出：overflow：hidden；
• 方法二.背景可以覆盖内边距，高度设置为0，padding-top内边距设置为原先高的值，这样背景图正常显示，文本就在盒子外面，然后隐藏溢出：overflow：hidden；
• 方法三，把文本用span元素包裹起来，然后隐藏span盒子。

10. 背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

 background: rgba(0,0,0,0.3); 

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

11. 背景图和img属性的区别

1. img元素属于HTML的概念，背景图属于css的概念
2. 当图片属于网页内容时，必须使用img元素
3. 当图片仅用于美化页面时，必须使用背景图