摘要：靈活的背景定位靈活的背景定位實(shí)現(xiàn)效果將背景圖定位到距離容器底邊且距離右邊的位置。棋盤實(shí)現(xiàn)效果實(shí)現(xiàn)代碼關(guān)鍵樣式其它樣式偽隨機(jī)背景偽隨機(jī)背景實(shí)現(xiàn)效果重復(fù)平鋪的幾何圖案很美觀，但看起來可能有一些呆板。

靈活的背景定位

實(shí)現(xiàn)效果：

將背景圖定位到距離容器底邊 10px 且距離右邊 20px 的位置。

background-position 方案

實(shí)現(xiàn)代碼：

海盜密碼

div {
    /* 關(guān)鍵樣式 */
    background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;
    
    /* 其它樣式 */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
}

實(shí)現(xiàn)要點(diǎn)：

• background-position 允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關(guān)鍵字。本例就是設(shè)置背景圖片離右邊緣 20px，離底邊 10px。
• 為了兼容不支持 background-position 這種語法的瀏覽器，提供一個(gè)合適的回退方案，那就是使用 background 的 bottom right 來定位，雖然不能設(shè)置具體的偏移量。

background-origin 方案

實(shí)現(xiàn)代碼：

海盜密碼

div {
    /* 關(guān)鍵樣式 */
    background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
    background-origin: content-box;
    padding: 10px 20px;
    
    /* 其它樣式 */
    max-width: 10em;
    min-height: 5em;
    color: white;
    font: 100%/1 sans-serif;
}

實(shí)現(xiàn)要點(diǎn)：

• background-origin 默認(rèn)值是 padding-box，也就說我們設(shè)置 background 為 top left 時(shí)左上角是 padding box（內(nèi)邊距的外沿框）的左上角。
• 在本例中設(shè)置 background-origin 為 content-box，那么就相對于 content box（內(nèi)容區(qū)的外沿框）的左上角，那么也就是背景圖離容器的右邊和底邊的偏移量是跟著容器的 padding 值走了，那設(shè)置 padding: 10px 20px; 自然就可以實(shí)現(xiàn)本例的效果了。

calc() 方案

實(shí)現(xiàn)代碼：

海盜密碼

div {
    /* 關(guān)鍵樣式 */
    background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
    background-position: calc(100% - 20px) calc(100% - 10px);
    
    /* 其它樣式 */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
}

實(shí)現(xiàn)要點(diǎn)：

• 使用 calc 來動(dòng)態(tài)計(jì)算使得背景圖的左上角水平偏移 100% - 20px，垂直偏移 100% - 10px。

條紋背景

水平條紋

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 30px;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• 通過 linear-gradient(#fb3 50%, #58a 0) 生成一個(gè)背景圖，該背景圖分為上下不同實(shí)色的兩部分，占滿容器大小。
• 然后通過 background-size：100% 30px; 設(shè)置該背景圖的寬高（寬為容器寬度，高為30px），由于默認(rèn)情況下背景是重復(fù)平鋪的，這樣整個(gè)容器就鋪滿高為 30px 的雙色水平條紋。

垂直條紋

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: linear-gradient(to right, #fb3 50%, #58a 0);
    background-size: 30px 100%;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• 通過 linear-gradient(to right, #fb3 50%, #58a 0) 生成一個(gè)背景圖，該背景圖分為左右不同實(shí)色的兩部分（to right 改變漸變的方向，從上下該為左右），占滿容器大小。
• 然后通過 background-size：30px 100%; 設(shè)置該背景圖的寬高（寬為 30px，高為容器高度），由于默認(rèn)情況下背景是重復(fù)平鋪的，這樣整個(gè)容器就鋪滿寬為 30px 的雙色水平垂直條紋。

斜向條紋

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: linear-gradient(45deg, 
              #fb3 25%, #58a 0, #58a 50%,
              #fb3 0, #fb3 75%, #58a 0);
    background-size: 42.4px 42.4px;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• 通過 linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0) 生成一個(gè)如下圖的可重復(fù)鋪設(shè)的背景圖（重點(diǎn)是修改漸變方向?yàn)?45 度，四條條紋）。

• 然后通過 background-size: 42.4px 42.4px; 設(shè)置背景尺寸。42.4px 是通過勾股定理求得（在我們的斜向條紋中，背景尺寸指定的是直角三角形的斜邊長度，但條紋的寬度實(shí)際上是直角三角形的高，所以要讓條紋寬度為 15px，就必須近似設(shè)置背景尺寸為 42.4px）。

可靈活設(shè)置角度的斜向條紋

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: repeating-linear-gradient(60deg, 
              #fb3, #fb3 15px,
              #58a 0, #58a 30px);
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• repeating-linear-gradient 生成色標(biāo)是無限循環(huán)重復(fù)的，直到填滿整個(gè)背景。不需要通過 background-size 設(shè)置背景尺寸，而且也不用考慮斜邊的問題，因?yàn)樵跐u變軸設(shè)置的長度就是條紋的寬度。最重要的一點(diǎn)是可以靈活設(shè)置任意角度的條紋，只要修改一處角度就可以。

復(fù)雜的背景圖案

網(wǎng)格

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: #58a;
    background-image: linear-gradient(white 2px, transparent 0),
                    linear-gradient(90deg, white 2px, transparent 0),
                    linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                    linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
    background-size: 50px 50px, 50px 50px,
                    10px 10px, 10px 10px;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• 沒有特殊的，看代碼吧。

波點(diǎn)

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: #655;
    background-image: radial-gradient(tan 20%, transparent 0),
                      radial-gradient(tan 20%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• 使用徑向漸變 radial-gradient 來創(chuàng)建圓形、橢圓，或者它們的一部分。本例使用它實(shí)現(xiàn)圓點(diǎn)的陣列。
• 然后生成兩層錯(cuò)開的圓點(diǎn)陣列錯(cuò)開疊加到一起，這樣就實(shí)現(xiàn)波點(diǎn)圖案效果了。

棋盤

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: #eee;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
        linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

偽隨機(jī)背景

實(shí)現(xiàn)效果：

重復(fù)平鋪的幾何圖案很美觀，但看起來可能有一些呆板。其實(shí)自然界中的事物都不是以無限平鋪的方式存在的。即使重復(fù)，也往往伴隨著多樣性和隨機(jī)性。因此為了更自然一些，我們可能需要實(shí)現(xiàn)的背景隨機(jī)一些，這樣就顯得自然一點(diǎn)。

實(shí)現(xiàn)代碼：

div {
    /* 關(guān)鍵樣式 */
    background: hsl(20, 40%, 90%);
    background-image: 
        linear-gradient(90deg, #fb3 11px, transparent 0),
        linear-gradient(90deg, #ab4 23px, transparent 0),
        linear-gradient(90deg, #655 23px, transparent 0);
    background-size: 83px 100%, 61px 100%, 41px 100%;
    
    /* 其它樣式 */
    width: 300px;
    height: 200px;
}

實(shí)現(xiàn)要點(diǎn)：

• 為了使得背景的重復(fù)性小一些，每組的條紋寬度都是質(zhì)數(shù)。

摘自：《CSS揭秘》 第 2 章 背景與邊框