CSS background深度解析

backgroudnd为缩写属性，语法为：

background: background-color background-image position /background-size background-repeat background-origin background-clip background-attachment inherit;

它包含以下属性：

1.background-color

背景色，默认值为透明transparent。支持几种写法：

background-color: yellow;
background-color: #00ff00;
background-color: transparent;
background-color: rgba(250,0,255, .5);

2.background-image

背景图像，值支持图片及渐变。支持多背景设置，以逗号隔开。注意，背景图/渐变显示的顺序是先写后显。

2.1 背景图像为图片：

background-image: url(1.jpg); // 一张背景图

background-image: url(1.jpg), url(2.jpg); // 两张背景图，1.jpg显示在前面

试一试>>

2.2 背景图像为渐变

参考本人写的文章(超详细带demo)： 聊聊css渐变>>

3.background-position

配合background-image使用，主要定义了图片的位置。
值可以写成几种方式：

3.1 top/let/center/right/bottom 排列组合使用

第一个值代表x轴，第二个值代表y轴算。
默认值为：left top
如果只写一个值，则第二个值默认为 center。

background-position: center right;

以上代码表示，图片将从中间及最右边开始渲染。
试一试>>

3.2 百分比，可为负值

3.3 具体数值，可为负值