溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css中如何設(shè)置背景不動，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
css設(shè)置背景不動的方法：首先創(chuàng)建一個HTML示例文件；然后輸入head標簽和css樣式標簽代碼；接著在style標簽之間，輸入定義網(wǎng)頁背景圖片的代碼；最后設(shè)置“background-repeat:no-repeat”屬性即可。
首先我們打開系統(tǒng)記事本程序，輸入網(wǎng)頁基本代碼
<html> <body> </body> </html>
然后輸入head標簽和css樣式標簽代碼
<head> <style type="text/css"> </style> </head>
點擊style標簽之間，輸入定義網(wǎng)頁背景圖片的代碼
body
{
background-image:url('d:/bg.gif');
}
然后在正文body標簽下輸入一些主體標簽和內(nèi)容
<body> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> <p>圖像不會隨頁面滾動。</p> </body>
點擊文件，另存為命令，將內(nèi)容保存為html格式后，打開網(wǎng)頁預(yù)覽下。
大家發(fā)現(xiàn)現(xiàn)在這種狀態(tài)，我們滾動鼠標滾輪時候，網(wǎng)頁內(nèi)容和背景圖片是同時滾動的，為便于查看，我們修改下代碼，讓圖片不重復(fù)顯示。
<style type="text/css">
body
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
}
</style>然后再預(yù)覽效果。
這樣可以很明顯的看出來背景圖片的變化，為了固定背景圖片，我們修改代碼為
<style type="text/css">
body
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>再來看下效果。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中如何設(shè)置背景不動”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼