浅谈css背景

一、css的元素盒子可以看成是两个图层组成，前景层和背景层。背景不能撑起盒子，若盒子的前景层里没有内容（文本图片等),又没有设置宽高，则显示不出来背景。

二、背景的属性有很多

1、background-color(背景颜色）

它的值可以是#，可以是如red,也可以是rgb(),或者是rgba();

注意：rgba(),是有设置背景颜色的透明度，但属性opacity则可以使应用这个属性的元素所有的内容都有透明度，包括图片文字按钮等

2、background-image (背景图片)，图片会默认以左上角为起点重复

3、background-repeat(背景重复）属性值有 repeat-x;repeat-y;no-repeat;

4、background-position(背景位置）可以使用关键字值 top left bottom right center 两两组合；也可使用百分比；也可以使用像素单位（可以设负值）

5、backgroung-size(背景尺寸）值有 百分比（缩放比例）；100px,800px(具体设置大小）；cover(拉大图片，使其完全填满背景区，保持宽高比）；contain(缩放图片，使其恰好适应背景区，保持宽高比）

注意：图片的缩放会导致一定程度的失真

6、background-attachment(背景粘贴）值有scroll和fixed

7、background-origin（背景图片的定位区域）

padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

8 、 background-clip （ 背景绘制区域）

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

9、渐变背景

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

• 径向渐变（Radial Gradients）- 由它们的中心定义

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}