CSS教程(4)：通過實(shí)例學(xué)習(xí)CSS背景

2024-07-11 08:44:03

字體：大中小

供稿：網(wǎng)友

本教程介紹：1.如何僅顯示一次背景圖像，2.如何放置背景圖像，3.如何使用%來定位背景圖像。本教程介紹：1.如何僅顯示一次背景圖像，2.如何放置背景圖像，3.如何使用%來定位背景圖像。
參考武林網(wǎng)關(guān)于CSS背景的理論知識(shí)：CSS教程(1)：學(xué)習(xí)CSS背景相關(guān)知識(shí)。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、如何放置背景圖像
本例演示如何在頁面上放置背景圖像。看到本信息說明該文是通過網(wǎng)頁教學(xué)（VeVb.com）整理發(fā)布的，請(qǐng)不要?jiǎng)h掉！
<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 中實(shí)現(xiàn)此效果，background-attachment 屬性必須設(shè)置為 "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 中實(shí)現(xiàn)此效果，background-attachment 屬性必須設(shè)置為 "fixed"。</p>
</body>
</html>

上一篇：CSS教程(5)：通過實(shí)例學(xué)習(xí)CSS背景

下一篇：CSS教程(3)：通過實(shí)例學(xué)習(xí)CSS背景