CSS3 background屬性

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background 簡寫屬性在一個聲明中設置所有的背景屬性。

可以設置如下屬性：

• background-color：#fff; //規定要使用的背景顏色。
• background-position:center left;  //規定背景圖像的位置。
• background-size：length|percentage|cover|contain;   //規定背景圖片的尺寸。
• background-repeat:repeat;  //規定如何重復背景圖像。
• background-origin:padding-box|border-box|content-box;默認值是：padding-box//規定背景圖片的定位區域。
• background-clip：border-box|padding-box|content-box;默認值是：border-box//規定背景的繪制區域。
• background-attachment：scroll|fixed|inherit; //設置背景圖像是否固定或者隨着頁面的其余部分滾動。
• background-image:#ccc|url(../img/1.jpg); //規定要使用的背景圖像。

如果不設置其中的某個值，也不會出問題，比如 background:#ff0000 url('smiley.gif'); 也是允許的。

通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。

================================================================================ 

關於CSS3 線性漸變和徑向漸變

資源鏈接：

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html

 我的示例：

HTML：

<div id="bgcolor"></div>

CSS：

#bgcolor{
           width: 1000px;
           height: 1000px;
           margin: 500px auto;
           /*有左上角到右下角的漸變*/
           background: -moz-linear-gradient(left top,#f00, #00f);
           background: -o-linear-gradient(left top,#f00, #00f);
           background: -webkit-linear-gradient(left top,#f00, #00f);   /*瀏覽器的兼容*/
           background: linear-gradient(left top,#f00, #00f) repeat scroll 0% 0%;
        }

 效果圖：

解析：

1、  -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

參數：其共有三個參數，第一個參數表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。如圖所示：

示例：background: -moz-linear-gradient( top,#ccc,#000);

效果：

2、

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則

　參數：-webkit-gradient 是 webkit 引擎對漸變的實現參數，一共有五個。第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值可以用坐標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）。第四個和第五個參數，分別是兩個color-stop函數。color-stop 函數接受兩個參數，第一個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色。如圖所示：

 

示例：我們先來看一個老式的寫法示例：

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

效果：

接着我們在來看一下新式的寫法：

-webkit-linear-gradient(top,#ccc,#000);

效果：

仔細對比，在 Mozilla 和 Webkit 下兩者的學法都基本上一致了，只是其前綴的區別。

3、-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

參數：-o-linear-gradient 有三個參數。第一個參數表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。（注：Opera 支持的版本有限，本例測試都是在 Opera11.1 版本下，后面不在提示），如圖所示：

示例：background: -o-linear-gradient(top,#ccc, #000);

效果 同上：