溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css中如何實現背景不滾動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
css背景不滾動的實現方法：首先新建一個html代碼頁面；然后在<title>標簽后面創建一個<style>標簽；接著在這個標簽里設置<body>標簽的背景圖片；最后設置“background-repeat:no-repeat;”屬性即可。
打開html開發軟件，新建一個html代碼頁面。
在html代碼頁面的<body>標簽里面輸入多行段落文字，用于后面瀏覽器滾動條滾動的時候查看圖片時候隨滾動條而滾動條。如圖
設置背景圖片樣式。在<title>標簽后面創建一個<style>標簽，然后在這個標簽里設置<body>標簽的背景圖片，以及背景圖片不重復。'
樣式代碼：
body{
background-image: url(img/bg.jpg);
background-repeat:no-repeat;
}
保存html代碼后使用瀏覽器打開，這個時候滾動瀏覽器滾動條發現背景圖片是隨瀏覽器滾動條的滾動而滾動的。
使用background-attachment: fixed設置背景圖片不隨滾動條而滾動。回到html代碼頁面，在body樣式中添加上background-attachment: fixed即可。
如圖
保存html代碼頁面后刷新瀏覽器，這個時候滾動瀏覽器滾動條發現背景圖片已經固定不隨瀏覽器滾動而滾動了。如圖
關于css中如何實現背景不滾動就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
