搜尋

首頁  >  文章  >  web前端  >  css怎麼設定背景不動

css怎麼設定背景不動

藏色散人
藏色散人原創
2021-04-09 09:31:014114瀏覽

css設定背景不動的方法：先建立一個HTML範例檔案；然後輸入head標籤和css樣式標籤程式碼；接著在style標籤之間，輸入定義網頁背景圖片的程式碼；最後設定「background -repeat:no-repeat」屬性即可。

css怎麼設定背景不動

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

首先我們打開系統記事本程序，輸入網頁基本代碼

<html>
 <body>
 </body>
</html>

css怎麼設定背景不動

#然後輸入head標籤和css樣式標籤代碼

<head>
  <style type="text/css">
  </style>
</head>

css怎麼設定背景不動

點擊style標籤之間，輸入定義網頁背景圖片的程式碼

body
{ 
  background-image:url(&#39;d:/bg.gif&#39;);
}

css怎麼設定背景不動

然後在文字body標籤下輸入一些主體標籤和內容

<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>

css怎麼設定背景不動

點擊文件，另存為命令，將內容儲存為html格式後，開啟網頁預覽下。

css怎麼設定背景不動

大家發現現在這種狀態，我們滾動滑鼠滾輪時候，網頁內容和背景圖片是同時滾動的，為便於查看，我們修改下程式碼，讓圖片不重複顯示。 

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
}
</style>

然後再預覽效果。

css怎麼設定背景不動

這樣可以很明顯的看出來背景圖片的變化，為了固定背景圖片，我們修改程式碼為

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>

再來看下效果。

css怎麼設定背景不動

【推薦學習：css影片教學】

以上是css怎麼設定背景不動的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼實現多行文字溢出隱藏下一篇：css怎麼實現多行文字溢出隱藏

相關文章

看更多