一、背景

1.背景颜色background-color：;

关于背景颜色有一个值为 opacity

opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

例1：

div {background-color: green;opacity: 0.3;}

例2：

div {background: rgba(0, 128, 0, 0.3) /}

2.背景图片 background-image: ;

如果设置背景图片比盒子设置的宽度和高度小，那么背景图片就会在水平和垂直方向都重复平铺在盒子里

加多重背景兼容性不太好

（记得使用图片时，使用不会干扰文本的图像哦！）

p {background-image: url("01.gif");}

3. 背景重复 background-repeat

默认是背景图片重复平铺在盒子里

4.背景图片位置 background-position

background-position ：值1 值2；

值1是x轴坐标 值2是y轴坐标

单位：

5.背景图片大小 background-size

css3新增元素，如果不兼容的话要加前缀

background-size：值1 值2；

值1代表背景图片的宽度，值2代表背景图片的高度

单位：

6.background-origin 定义背景图片的渲染位置

border-box 边框盒子 背景图片从边框开始控制渲染

padding-box 背景图片从内边距开始控制渲染

content-box 背景图片从内容开始控制渲染

7.background-attachment 定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment ：fixed 固定 图片固定在页面上，不随着内容的滚动而滚动

background-attachment ：scroll 默认 背景图像随页面的其余部分一起滚动

7. 背景简写

提问！都有哪些属性值可以简写

在前面的博客里提到了font值，padding值，margin值 都可以简写，当然背景也可以啦

之前：

body {background-color: #ffffff;background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;}

简写之后：

background : #ffffff url("tree.png") no-repeat right top / 500pxfixed ;

如此一来是不是让代码看起来不那么冗长，简单明了

没有先后顺序，空格隔开

位置在前，大小在后， 位置和大小之间用 / 隔开

background-color 背景颜色background-image背景图片background-repeat背景图片是否重复background-position背景定位background-size 背景大小background-attachment 背景图片是否滚动