CSS3背景

背景圖片區(qū)域：background-clip屬性

• 概念：指定背景繪制區(qū)域
• 語法：background-clip: boder-box(默認值) | pdding-box | content-box

background-clip: border-box;    // 背景被裁剪到邊框
background-clip: padding-box;   // 背景被裁剪到內(nèi)邊距
background-clip: content-box;   // 背景被裁剪到內(nèi)容框

背景圖片定位：background-origin屬性

• 概念：設(shè)定元素背景圖片的原始起始位置
• 語法：background-origin: boder-box | pdding-box | content-box

background-origin: border-box;    // 背景圖片從border-box的最左上角起始
background-origin: padding-box;   // 背景圖片從padding-box的最左上角起始
background-origin: content-box;   // 背景圖片從content-box的最左上角起始

好文鏈接：background-position 用法詳細介紹

背景圖片大?。篵ackground-size屬性

• 概念：指定背景圖片的大小
• 語法：background-size: length | percentage | cover | contain

background-size: contain;      // 將背景圖片等比例縮放至某一邊緊貼容器邊緣為止
background-size: cover;        // 將背景圖片等比例縮放以填滿整個容器
background-size: 800px 500px;  // 背景圖片的寬度是800px，高度是500px
background-size: 800px;        // 相當(dāng)于800px auto，背景圖片的寬度是800px，高度等比例縮放
background-size: 50% 50%;      // 背景圖片的寬度/高度都是容器的50%
background-size: 50%;          // 相當(dāng)于50% auto，背景圖片的寬度是容器寬度的50%，高度等比例縮放
background-size: 100% 100%;    // 背景圖片的寬度/高度都是容器的100%
background-size: 100%;         // 相當(dāng)于100% auto，背景圖片的寬度是容器寬度的100%，高度等比例縮放

多重背景圖片：background-image屬性

• 概念：為元素使用多個背景圖片
• 語法：background-image: url(img1.jpg), url(img2.jpg)

background-image: url('bg2.png'), url('bg1.jpg');
// bg2.png會覆蓋bg1.jpg

背景屬性整合：background屬性

• 概念：在一個聲明中設(shè)置所有的背景屬性
• 語法：background:color position size repeat origin clip attachment image

background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');

// 經(jīng)驗之談，還是建議以這種形式來寫
background: #abcdef url('bg1.jpg') no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;

CSS3漸變

漸變(gradients)可以在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。

線性漸變：linear Gradients屬性

• 概念：是沿著一根軸線改變顏色，從起點到終點顏色進行順序漸變(從一邊拉向另一邊)
• 語法：background: linear-gradient(direction, color-stop1,color-stop2,...)

// 從上到下(默認)，可以省略方向
background: -webkit-linear-gradient(red, blue);
background:    -moz-linear-gradient(red, blue);
background:      -o-linear-gradient(red, blue);
background:         linear-gradient(red, blue);

// 從左到右
background: -webkit-linear-gradient(left, red , blue);
background:    -moz-linear-gradient(right, red, blue);
background:      -o-linear-gradient(right, red, blue);
background:         linear-gradient(to right, red , blue);  // 標(biāo)準(zhǔn)寫法，建議使用

// 對角
background: -webkit-linear-gradient(       left top, red, yellow, blue);
background:    -moz-linear-gradient(   right bottom, red, yellow, blue);
background:      -o-linear-gradient(   right bottom, red, yellow, blue);
background:         linear-gradient(to right bottom, red, yellow, blue);  // 標(biāo)準(zhǔn)寫法，建議使用

// 使用角度（方向）
background: -webkit-linear-gradient(135deg, red, yellow, blue);
background:    -moz-linear-gradient(135deg, red, yellow, blue);
background:      -o-linear-gradient(135deg, red, yellow, blue);
background:         linear-gradient(135deg, red, yellow, blue);

deg.png

// 顏色節(jié)點(均勻分布)
background: -webkit-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background:    -moz-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background:      -o-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background:         linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);

// 顏色節(jié)點(按比例分布)
// 如果第一個不寫值，默認0%
// 如果最后一個不寫值，默認100%
// 從0到10%是紅色，10%到15%是紅色到橙色的過渡，以此類推
background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background:    -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background:      -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background:         linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);

// 顏色節(jié)點(使用透明)
background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background:    -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background:      -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background:         linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));

// 中間第50%的位置，透明度是0.6，建議這種方式來控制透明度的漸變
background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
background:    -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
background:      -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
background:         linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));

// 線性漸變
background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background:    -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background:      -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background:         repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);

徑向漸變：linear Gradients屬性

• 概念：從起點到終點顏色從內(nèi)向外進行圓形漸變(從中間向外拉)
• 語法：radial-gradient(center, shape size, start-color , ... , last-color);

// 顏色結(jié)點均勻分布（默認情況）
background: -webkit-radial-gradient(red, blue);
background:    -moz-radial-gradient(red, blue);
background:      -o-radial-gradient(red, blue);
background:         radial-gradient(red, blue);

// 顏色結(jié)點不均勻分布
// 0%到50%是紅色，50%到70%是紅色到藍色的漸變，70%到100%是藍色
background: -webkit-radial-gradient(red 50%, blue 70%);
background:    -moz-radial-gradient(red 50%, blue 70%);
background:      -o-radial-gradient(red 50%, blue 70%);
background:         radial-gradient(red 50%, blue 70%);

// 設(shè)置形狀
// radial-gradient(shape, start-color , ... , last-color);
// circle：圓形，ellipse：橢圓（默認）

// 如果元素的寬高一樣，那參數(shù)shape無論設(shè)置為circle還是ellipse，顯示效果都是圓形

background: -webkit-radial-gradient(circle, red, blue);
background:    -moz-radial-gradient(circle, red, blue);
background:      -o-radial-gradient(circle, red, blue);
background:         radial-gradient(circle, red, blue);

// 設(shè)置尺寸
// radial-gradient(size, start-color , ... , last-color);
// closest-side：最近邊，漸變的終點是最近的一條邊
// farthest-side：最遠邊，漸變的終點是最遠的一條邊
// closest-corner：最近角，漸變的終點是最近的一個角
// farthest-corner：最遠角，漸變的終點是最遠的一個角


background:         radial-gradient(closest-side, red, blue);
background:         radial-gradient(farthest-side, red, blue);
background:         radial-gradient(closest-corner, red, blue);
background:         radial-gradient(farthest-corner, red, blue);
// ...兼容性處理省略...

// 設(shè)置圓心位置
// radial-gradient(center, shape size, start-color , ... , last-color);
// 圓心位置(x軸的30%，y軸的70%)

background:         radial-gradient(30% 70%, closest-side circle, red, blue);
background:         radial-gradient(30% 70%, farthest-side circle, red, blue);
background:         radial-gradient(30% 70%, closest-corner circle, red, blue);
background:         radial-gradient(30% 70%, farthest-corner circle, red, blue);
// 注意shape和size之間是用空格隔開的

// 重復(fù)漸變
background: -webkit-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background:    -moz-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background:      -o-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background:         repeating-radial-gradient(red 0%, blue 10%, red 20% );