如何使用css讓背景圖片不重複
- 青灯夜游原創
- 2021-04-29 16:10:0813673瀏覽
css中可使用background-repeat屬性來讓背景圖片不重複，只需為元素添加「background-repeat:no-repeat;」樣式即可；此屬性可設定背景圖片是否重複以及如何重複，當值為“no-repeat”時設定不重複。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在CSS中，我們可以利用background 屬性來設定背景圖片，如下面的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
background: url("img/1.jpg");
}
</style>
</head>
<body>
</body>
</html>運行程式碼我們發現，背景圖片無論是橫向或是縱向都是重複，直至鋪滿整個顯示區域。
那麼如何讓背景圖片不重複？可以使用background-repeat 屬性。
background-repeat 屬性可以設定圖片背景圖片是否重複以及如何重複，它的預設值是橫向和縱向都會重複。
它有四個可以設定的值，分別如下
repeat ：預設。背景影像將在垂直方向和水平方向重複。
repeat-x ：背景影像將在水平方向重複。
repeat-y ：背景影像將在垂直方向重複。
no-repeat ：背景圖片將只顯示一次。
可以看出，當該屬性的值為「no-repeat」時，可讓背景圖片不重複
css背景圖片不重複
body{
background: url("img/1.jpg");
background-repeat:no-repeat;
}運行結果如下圖，背景圖片橫向以及縱向都不會重複，只會顯示一張
（學習影片分享：css影片教學）
以上是如何使用css讓背景圖片不重複的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css如何設定圓角邊框下一篇：css如何設定圓角邊框