一、css3背景切割： background-clip:border-box|padding-box|content-box;

作用： 用來設置背景的可見區域

a) border-box 默認值，背景在邊框及邊框以內的區域可見

b) padding-box 背景在padding及padding以內的區域可見

c) content-box 背景在content區域可見

二、背景原點: background-origin:padding-box|border-box|content-box;

作用：background-origin用來設置背景圖像的定位區域

a) padding-box 默認值，背景原點在padding區域

b) border-box 背景原點在border區域

c) content-box 背景原點在content區域

三、背景切割&背景原點：background-clip和background-origin結合使用

background-origin:content-box;

background-clip:padding-box;

背景原點在content區域，背景在padding以內的區域可見

四、背景圖尺寸：background-size:值;

1) length

可以設置背景圖的寬度和高度，第一個值代表寬度，第二個值代表高度，如果省略第二個值，默認為auto，等比例縮放

eg: background-size:500px 300px; (背景圖有可能會發生變形)

background-size:500px; (背景圖等比例縮放)

2) 百分比

可以以父元素容器的百分比來設置背景圖的尺寸，第一個值代表寬度，第二個值代表高度，如果省略第二個值，默認為auto

eg: background-size:100% 100%; (背景圖有可能會發生變形)

3) cover

把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像有可能超出容器,背景圖像不會發生變形

4) contain

把圖像擴展至最大尺寸，以使寬度和高度 完全適應內容區域。背景圖像始終被包含在容器內,
背景圖不會發生變形

五、設置透明背景： background:rgba(r,g,b,a); a代表透明度

eg: background:rgba(0,0,0,.4);

註：rgba和opacity的區別：

設置rgba背景帶有一定的透明度，容器中的文字和圖片不會跟隨透明

設置opacity是給整個容器添加一定的透明度，文字和圖片也會透明

六、顏色模式： background:hsla(h,s,l,a);

h: 色調，取值範圍0~360

s: 飽和度，取值範圍 0%~100%

l: 亮度，取值範圍0%~100%

a: 透明度，取值範圍0~1

七、線性漸變： background:linear-gradient(方向,顏色值 位置,顏色值 位置);

eg: background:linear-gradient(to right,red 0%,yellow 30%,green 35%);

註：重復線性漸變

eg: background:repeating-linear-gradient(red 0%,yellow 10%,green 20%);

設置重復線性漸變時，一定要自定義線性漸變的位置

八、徑向漸變： background:-webkit-radial-gradient(中心點位置,形狀 漸變半徑,顏色 位置,顏色 位置);

eg: background:-webkit-radial-gradient(10% 80%,circle closest-corner,red 0%,yellow 15%,green 25%);

註：漸變半徑可選參數值：

a) closest-corner 圓心到離圓心最近的角

b) closest-side 圓心到離圓心最近的邊

c) farthest-corner 圓心到離圓心最遠的角

d) farthest-side 圓心到離圓心最遠的邊

註：重復徑向漸變

eg: background:-webkit-repeating-radial-gradient(red 0%,yellow 5%,green 10%);

擴展：

1.添加蒙版

語法：-webkit-mask-image:url(蒙版圖片路徑)|使用漸變作為蒙版;

-webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;

-webkit-mask-position:left center;

2.設置背景可視區域為文字區域

語法： -webkit-background-clip:text;

註：設置此屬性，文字顏色需要設置為透明（即color:transparent）

3.倒影：-webkit-box-reflect:倒影方向 偏移量 倒影漸變;

a) 倒影方向 left|right|above(上)|below(下)

b) 偏移量

從零開始學習前端開發 — 17、CSS3背景與漸變