這篇文章主要介紹了css怎么設(shè)置背景圖片的平鋪方式，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)寶山免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

當我們使用background-image屬性讓一張背景圖片在頁面上顯示時，背景圖片有可能會因為一些原因（比如圖片尺寸）從而會以水平方向和垂直方向上同時平鋪的方式顯示，如下圖：

但有時我們不需要這樣的背景圖片顯示方法，單單只是想要背景圖片僅顯示一次（不平鋪），或者單獨實現(xiàn)水平方向平鋪，垂直方向平鋪。這些平鋪方式我們可以用css實現(xiàn)！

那么在css中如何設(shè)置背景圖片的平鋪方式？其實很簡單，css background-repeat屬性就可以設(shè)置背景圖片的平鋪方式。background-repeat屬性可以通過設(shè)置以下的屬性值來實現(xiàn)背景圖片的水平方向平鋪、垂直方向平鋪，或者不平鋪、完全平鋪。

repeat：默認值，設(shè)置背景圖像在垂直方向和水平方向平鋪，即：完全平鋪。

repeat-x ：設(shè)置背景圖像在水平方向平鋪。

repeat-y ：設(shè)置 背景圖像在垂直方向平鋪。

no-repeat：設(shè)置背景圖像不平鋪，即：僅顯示一次。

下面我們就通過簡單的代碼示例來了解一下這些屬性值的實現(xiàn)方法：

1、repeat 設(shè)置背景圖像完全平鋪

效果圖：

2、no-repeat 設(shè)置背景圖像不平鋪

效果圖：

3、repeat-x  設(shè)置背景圖像在水平方向平鋪

效果圖：

4、repeat-y  設(shè)置 背景圖像在垂直方向平鋪

效果圖：

關(guān)于background-repeat屬性有以下說明：

從原圖像開始重復，原圖像由 background-image 定義；需要先定義原圖像，在使用background-repeat屬性設(shè)置平鋪方式。

背景圖像的位置是根據(jù) background-position 屬性設(shè)置的。如果未規(guī)定 background-position 屬性，圖像會被放置在元素的左上角。

感謝你能夠認真閱讀完這篇文章，希望小編分享css怎么設(shè)置背景圖片的平鋪方式內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細的解決方法等著你來學習!

當前標題：css怎么設(shè)置背景圖片的平鋪方式-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/dgoehs.html