css怎麼讓背景圖片不重複

在css中，可以使用background-repeat屬性來讓背景圖片不重複，該屬性可以設定背景圖片是否重複以及如何重複；只需給背景圖片設定「background-repeat:no-repeat; ”樣式即可讓背景圖片不重複。

本教學操作環境：Windows7系統、HTML5&&CSS3版本，Dell G3電腦。

推薦：css影片教學

CSS設定背景圖片

在CSS中，我們可以利用background 屬性來設定背景圖片，如下面的程式碼

執行程式碼我們發現，背景圖片無論是橫向或縱向都是重複，直至鋪滿整個顯示區域。

CSS background-repeat 屬性

CSS中有個background-repeat 屬性，可以設定圖片背景圖片是否重複以及如何重複，它的預設值是橫向和縱向都會重複，如果不設定此屬性的值，那麼背景圖片就如上面的範例程式碼一樣，會橫向以及縱向同時重複，並鋪滿整個要顯示的區域。

它有三個可以設定的值，分別如下，其中 repeat 值為預設。

• repeat ：預設。背景影像將在垂直方向和水平方向重複。

• repeat-x ：背景影像將在水平方向重複。

• repeat-y ：背景影像將在垂直方向重複。

• no-repeat ：背景圖片將只顯示一次。

• inherit ：規定應該從父元素繼承 background-repeat 屬性的設定。

css背景圖片只水平方向(橫向)重複

#CSS程式碼：

body{
    background: url('2019062123225css怎麼讓背景圖片不重複');
    background-repeat:repeat-x;
}

運行結果如下圖，背景圖片都是水平方向重複的

css背景圖片縱向重複

CSS程式碼

body{
    background: url('2019062123225css怎麼讓背景圖片不重複');
    background-repeat:repeat-y;
}

運行結果如下圖，背景圖片都是縱向重複

css背景圖片不重複

CSS程式碼

body{
    background: url('2019062123225css怎麼讓背景圖片不重複');
    background-repeat:no-repeat;
}

運行結果如下圖，背景圖片橫向以及縱向都不會重複，只會顯示一張

#更多程式相關知識，請造訪：程式設計教學！ ！

以上是css怎麼讓背景圖片不重複的詳細內容。更多資訊請關注PHP中文網其他相關文章！