溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么使用css讓背景圖片不重復(fù)，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
css中可使用background-repeat屬性來讓背景圖片不重復(fù)，只需給元素添加“background-repeat:no-repeat;”樣式即可；該屬性可設(shè)置背景圖片是否重復(fù)以及如何重復(fù)，當(dāng)值為“no-repeat”時設(shè)置不重復(fù)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在CSS中，我們可以利用 background 屬性來設(shè)置背景圖片，如下面的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
background: url("img/1.jpg");
}
</style>
</head>
<body>
</body>
</html>運行代碼我們發(fā)現(xiàn)，背景圖片無論是橫向或是縱向都是重復(fù)，直至鋪滿整個顯示區(qū)域。
那么如何讓背景圖片不重復(fù)？可以使用background-repeat 屬性。
background-repeat 屬性可以設(shè)置圖片背景圖片是否重復(fù)以及如何重復(fù)，它的默認(rèn)值是橫向和縱向都會重復(fù)。
它有四個可以設(shè)置的值，分別如下
repeat ：默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x ：背景圖像將在水平方向重復(fù)。
repeat-y ：背景圖像將在垂直方向重復(fù)。
no-repeat ：背景圖像將僅顯示一次。
可以看出，當(dāng)該屬性的值為“no-repeat”時，可讓背景圖片不重復(fù)
css背景圖片不重復(fù)
body{
background: url("img/1.jpg");
background-repeat:no-repeat;
}運行結(jié)果如下圖，背景圖片橫向以及縱向都不會重復(fù)，只會顯示一張
以上是“怎么使用css讓背景圖片不重復(fù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼