首頁 >web前端 >css教學 >如何使用css讓背景圖片不重複

如何使用css讓背景圖片不重複

青灯夜游原創: 2021-04-29 16:10:0813787瀏覽

css中可使用background-repeat屬性來讓背景圖片不重複，只需為元素添加「background-repeat:no-repeat;」樣式即可；此屬性可設定背景圖片是否重複以及如何重複，當值為“no-repeat”時設定不重複。

如何使用css讓背景圖片不重複

本教學操作環境：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>

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

如何使用css讓背景圖片不重複

那麼如何讓背景圖片不重複？可以使用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影片教學）

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何設定圓角邊框下一篇：css如何設定圓角邊框

看更多