css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹-css教學-PHP中文網

首頁

web前端

css教學

css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹

不言

Oct 08, 2018 pm 02:11 PM

css

在網頁設計的過程中，有時候可能會要求背景圖片平鋪，因為這樣會讓整個網頁看起來比較好看，圖片平鋪可以不用具體設定body寬度和高度大小，就可以直接將圖片平鋪整個頁面，那麼，如何讓背景圖片平鋪呢？接下來這篇文章將要為大家介紹關於css讓背景圖片平舖的方法，有需要的朋友可以參考一下。

我們先來看看css設定背景圖片平鋪方式。

repeat：即預設方式，完全平鋪背景；

no-repeat：在 X及Y軸方向均不平鋪；

repeat-x：橫向平鋪背景;

repeat-y：縱向平鋪背景。

下面我們就來看看css的這四個背景圖片平舖的實作程式碼。

css背景圖片平鋪之完全平鋪背景的程式碼：

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg); 
        background-repeat: no-repeat; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

css背景圖片平鋪效果如下：

css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹

css背景圖片平鋪之在X及Y軸方向均不平鋪：

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(images/tu.jpg); 
        background-repeat: no-repeat; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

css背景在X及Y軸方向皆不平鋪效果如下：

css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹

css背景圖片平鋪之橫向平鋪背景：

#背景圖片現在只在X軸即橫向進行了平鋪操作，縱向並沒有進行平鋪

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(images/tu.jpg); 
        background-repeat: repeat-x; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

#css橫向平鋪背景效果如下：

css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹

css背景圖片平鋪之縱向平鋪背景：

背景圖片現在只在Y軸即橫向進行了平鋪操作，橫向並沒有進行平鋪

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(images/tu.jpg); 
        background-repeat: repeat-y; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

css縱向平鋪背景效果如下：