這篇文章主要介紹了css中背景圖如何設(shè)置平鋪方式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)三門免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
css中可用background-repeat屬性設(shè)置背景圖的平鋪方式，當值為“repeat”可向垂直和水平方向重復(fù)平鋪，為“repeat-x”可向水平方向重復(fù)平鋪，為“repeat-y”可向垂直方向重復(fù)，為“no-repeat”則不重復(fù)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
默認情況下，如果一幅背景圖像不足以占滿整個容器時，就會在水平方向和垂直方向重復(fù)，以填滿整個容器。然而，有時候卻希望背景圖像只出現(xiàn)一次，或只在某個方向上重復(fù)。
這時，就可以通過 background-repeat屬性來定義背景圖像如何重復(fù)，即背景圖像的平鋪方式，可選值有 repeat | repeat-x | repeat-y | space | round | no-repeat，默認值為 repeat。不同取值的含義見下表：
| 屬性值 | 含義 |
|---|---|
| repeat | 默認值，圖像在水平方向和垂直方向都重復(fù)以填滿容器 |
| repeat-x | 圖像只在水平方向重復(fù)以填滿容器 |
| repeat-y | 圖像只在垂直方向重復(fù)以填滿容器 |
| space | 圖像向兩端對齊重復(fù)以填滿容器，多余空間用空白代替 |
| round | 圖像向兩端對齊重復(fù)以填滿容器，多余空間通過圖像拉伸來填充 |
| no-repeat | 不重復(fù)，圖像只顯示一次 |
默認情況下，背景圖像的填充區(qū)域為元素的 padding-box 區(qū)域，而背景圖像平鋪之后，其填充區(qū)域?qū)⑹窃氐?border-box 區(qū)域。
background-repeat屬性需要 2 個參數(shù)，如果提供 2 個參數(shù)，第一個用于水平方向，第二個用于垂直方向。如果只提供 1 個參數(shù)，則同時用于水平方向和垂直方向。特殊值 repeat-x 和 repeat-y除外，因為 repeat-x 相當于 repeat no-repeat，repeat-y 相當于 no-repeat repeat，即 repeat-x 和 repeat-y 就等價于提供了 2 個參數(shù)值。
為了清楚了解 background-repeat屬性在不同取值下的表現(xiàn)，這里針對每個取值定義了一個類，然后把它們分別應(yīng)用到一個容器。
HTML代碼如下：
CSS代碼如下：
重慶分公司
重慶分公司
div {
width: 100px;
height: 120px;
border: 1px dashed #888;
background-image: url(bg.png);
}
.repeat-x {
background-repeat: repeat-x;
}
.repeat-y {
background-repeat: repeat-y;
}
.repeat {
background-repeat: repeat;
}
.space {
background-repeat: space;
}
.round {
background-repeat: round;
}
.no-repeat {
background-repeat: no-repeat;
}上述代碼中，容器的寬度為 100px、高度為 120px，背景圖像的寬度和高度都是 40px。為了能夠清楚可見背景圖像的范圍，這里給容器增加了 1px 的虛線框，給背景圖像增加了 1px 的黑色邊框。運行結(jié)果如圖 4?27 所示：
background-repeat屬性效果圖
從上圖可以看出，圖像都是按原始尺寸進行重復(fù)，來填滿容器。在水平方向上，當容器的寬度不是背景圖像寬度的整數(shù)倍時：如果取值為 space，多余空間用空白填充；如果取值為 round，背景圖像會被縮放；如果為其他值，最后一幅圖像可能不完整。垂直方向同理。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中背景圖如何設(shè)置平鋪方式”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
