DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS教程(4):通過實例學習CSS背景
CSS教程(4):通過實例學習CSS背景
編輯:CSS詳解     

1、如何僅顯示一次背景圖像

本例演示如何僅顯示一次背景圖像。

<Html>
<head>
<style type="text/CSS">
body

background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</Html>

2、如何放置背景圖像

本例演示如何在頁面上放置背景圖像。看到本信息說明該文是通過網頁教學(webjx.com)整理發布的,請不要刪掉!

<Html>
<head>
<style type="text/CSS">
body

  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>注釋:</b>為了在 Mozilla 中實現此效果,background-attachment 屬性必須設置為 "fixed"。</p>
</body>
</body>
</Html>

3、如何使用%來定位背景圖像

本例演示如何使用百分比來在頁面上定位背景圖像。

<Html>
<head>
<style type="text/CSS">
body

background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%; 
}
</style>
</head>
<body>
<p><b>注釋:</b>為了在 Mozilla 中實現此效果,background-attachment 屬性必須設置為 "fixed"。</p>
</body>
</Html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved