溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用css將背景圖像固定在視口”，在日常操作中，相信很多人在怎么用css將背景圖像固定在視口問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用css將背景圖像固定在視口”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
當我們想將背景圖片進行固定的時候，我們應該怎么做？
<style>
body{
background-image: url("images/1.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
<div>為了顯示，表明這個一個div元素</div>
<p>為了顯示，表明這個一個p元素</p>
</body>這個小例子的結果是
我們可以看到這個小例子的背景真的沒有隨文字的移動而發生改變哎。知道這么多之后，我們去看一下什么屬性可以設置背景固定吧。
background-attachment屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。
這個屬性的值有好幾個，其中scroll是默認值。表示背景圖像會隨著頁面其余部分的滾動而移動，而fixed則表示當頁面的其余部分滾動時，背景圖像不會移動。還有一個值是local，此關鍵屬性值表示背景相對于元素的內容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內容滾動， 并且背景的繪制區域和定位區域是相對于可滾動的區域而不是包含他們的邊框。
到此，關于“怎么用css將背景圖像固定在視口”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
