本例演示如何使用像素來在頁面上定位背景圖像。
<Html>
<head>
<style type="text/CSS">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
</head>
<body>
<p><b>注釋：</b>為了在 Mozilla 中實現此效果，background-attachment 屬性必須設置為 "fixed"。</p>
</body>
</Html>
本例演示如何設置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。本文由網頁教學網webjx.com整理發布！轉載請注明出處，謝謝！
<Html>
<head>
<style type="text/CSS">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<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>
</Html>
本例演示如何使用簡寫屬性來將所有背景屬性設置在一個聲明之中。
<Html>
<head>
<style type="text/CSS">
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
</style>
</head>
<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>
</Html>