背景颜色

1、背景颜色：background-color

 颜色拓展：

1.1、RGBA：

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的

颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法：

color：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

例：

border-color:rgba(255 , 0 , 0 , .7);

border-color:rgba(255 , 0 , 0 , .7);

1.2、渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

 

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。(颜色值后面可以追加百分比，表示这个颜色要占总背景颜色面积的百分比)

例子：

background-image:linear-gradient(to left, red 30%,blue);

2、背景图片：background-image : none | url ( url )

例：body { background-image:url(images/bg.gif);}

3、背景平铺方式：background-repeat : repeat （铺满/默认）no-repeat （不平铺，显示一个）repeat-x （X轴水平平铺）repeat-y （Y轴垂直平铺）

4、背景定位：background-position：

5、背景样式缩写：background: 背景色  背景图片  背景平铺方式  背景定位

例：

body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50%  30px;

}

缩写后：body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}