CSS 背景 顏色 圖片 線性漸變 圓形漸變

CSS中，background-color屬性在 image屬性的下層。

background-image:url(images/150.png);若是疊加顯示，CSS 規則中先列出的圖片在上層 

background-repeat:no-repeat;  |  repeat-x;  |  repeat-y;

background-position:50% 50%;  |  center ;  |  (默認左上角的點爲原點,就像一個Y軸顛倒的數軸，第一象限，原點位置x,y=0%)使用數值時，第一個值表示X軸位置，第二個值表示Y軸位置。要是隻設定一個值，則將其用來設定X軸位置，而Y軸位置會被設爲 center。能夠使用負值。

在使用關鍵字和百分比值的狀況下，設定的值同時應用於元素和圖片。換句話說，若是設定了
33% 33%，則圖片水平 33%的位置與元素水平 33%的位置對齊。垂直方面也同樣。

background-size：
50%：縮放圖片，填充一半（不保持高寬比）
100px 70px；
cover：徹底填充背景（不保持高寬比）；
contain：使其在背景區內，圖片高寬比不變。

background-attachment :

scroll （默認）背景圖片隨元素移動而移動

fixed 

 

background:linear-gradient （線性漸變）

栗子1，起點：

background:linear-gradient(#666, #fff);（默認：從上到下）
background:linear-gradient(left, #666, #fff);從左到右，
background:linear-gradient(-45deg, #666, #fff); (默認開始點中上，-45度，變成了左上)

栗子2，設置漸變點（該點設定爲該顏色，並從該點開始漸變）：

background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);

/*50%處有一個漸變點，開始和結束位置沒有聲明，默認爲 0%和 100%。*/

background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);/*20%和 80%處有兩個漸變點

起點和終點不是 0%和 100%。此時，在第一個漸變點（20%）
以前，是第一個漸變點聲明的實色，而在該點以後，則是從該顏色到下一個漸變點
顏色的過渡。一樣，在最後一個漸變點（80%）以後，該漸變點的顏色會以實色擴展
到元素結束。

background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%,#64d1dd);/*25%、 50%、 75%處有三個漸變點*/

background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43);/*爲同一個漸變點設定兩種顏色能夠獲得突變效果*/

background: radial-gradient：(放射漸變)

栗子：

background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);默認的漸變形狀，即漸變效果會填充元素（從圓心開始漸變，多是橢圓和圓形，取決於盒子的形狀）

background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);（圓形）

background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,#4947ba);（指定位置，圓形）