CSS3中的渐变和透明

渐变(Gradient)

W3C标准渐变语法：

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)

1. <angle>：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。

2.关键词：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。

3. 第二个和第三个参数，表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。

eg:

　　linear-gradient(to top, orange, green);------颜色从下向上由橙色变成绿色

　   linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);-----多种颜色的渐变

注：CSS3渐变属性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持W3C的标准语法，但在Webkit内核下的Safari、iOS Safari、Android浏览器和Blackberry浏览器中还是需要添加浏览器的前缀 “-webkit-”。

 

透明(RGBA)

语法：background:rgba(R , G , B , 透明值);

eg:background:rgba(0,0,0,0.5);黑色背景透明度为半透明。

 

rgba与opacity的区别：

用opacity只能设置容器的背景透明，并且容器内的子集也会受到透明度的影响。rgba只要能用颜色的地方都能用它来设置透明度，且其透明度不会影响到容器的子集，它只对容器自身起作用。rgba的弊端，IE9以下均不支持。

对不支持rgba的浏览器采取"fallback color"的方式,"fallback color"的意思是我给IE备份一个色，在不支持RGBA的情况下，我照样给他一个色，而对rgba支持的浏览器并不会带来影响。

"fallback color"使用方法：给容器制作一张图片或都只给其加一个色。

eg:

　　background: rgb(0,0,0); /*The Fallback color*/

　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。如果你和我一样不知道怎么转换这个值，你可以采用CSS背景颜色属性值转换 这个工具


综合上面的所述，我们规纳一个RGBA在实际应用中的模式

.rgba {
             background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
             background: rgba(0, 0, 0,0.5);
             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    
             filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
          }

注：rgba支持的浏览器：IE9+、Firefox 3.0.10+、Chrome 2.0x+、Opera 9.64+、Safari 4+。