CSS設置背景——圖片背景
<1>.默認設置下的背景圖片
1 <html>
2 <head>
3 <style type="text/css">
4 body {background-image: url(這個地方要寫的就是你的圖片的url地址了);}
5 </style>
6 </head>
7
8 <body>
9 </body>
10 </html>
那個url地址的填寫該如何去做呢？
比如你在E盤中新建了一個文件夾My Web，當然你的站點就是建在這里了。
而在My Web中你又新建了一個文件夾btful是專門用來放圖片的，在這個文件夾中
就有一張圖片的名字叫做888，而且是jpg格式的。那么這個張圖片的url地址就是：btful/888.jpg。
而不要去管前面的E盤和My Web。
如果不按照上面的做法，就會失敗的。
可以看到，這個背景圖片的設置與背景顏色的設置方法幾乎完全一樣。
<2>.設置背景圖片是否平鋪
1 <html>
2 <head>
3 <style type="text/css">
4 body
5 {
6 background-image:url(btful/圖片/55543583.jpg);
7 background-repeat:no-repeat;
8 }
9 </style>
10 </head>
11
12 <body>
13 </body>
14 </html>
仔細的對照一下，這兩段代碼還是有一點區別的。那就是圖片的repeat屬性。
當background-repeat的值為repeat時，如果圖片的尺寸大小沒有瀏覽器屏幕那么大時，
這個圖片就會被平鋪。
當bacdground-repeat的值為no-repeat時，沒有被圖片覆蓋的區域將會是一片的空白。
當然對于，repeat-x和repeat-y這兩個參數值就表示：在x軸方向和在y軸方向上平鋪圖片了。
具體的效果如何，那就得動手了！
<3>設置背景圖片的位置
1 <html>
2 <head>
3 <style type="text/css">
4 body
5 {
6 background-image:url(btful/圖片/55543583.jpg);
7 background-repeat:no-repeat;
8 background-position: 50px 120px;
9 }
10 </style>
11 </head>
12
13 <body>
14 <h1>
15 原來如此呀
16 </h1>
17 </body>
18 </html>
這是一種用像素的方法來設置位置的。
另外還有用比例的方法，只改為background-position: 28% 36%;就可以了。
除此之外就是用關鍵字的方法來設置了，其中包括center, left, right, top, bottom等。
<4>設置固定的背景圖片
1 <html>
2 <head>
3 <style type="text/css">
4 body
5 {
6 background-image:url(btful/888.jpg);
7 background-attachment:fixed;
8 }
9 </style>
10 </head>
11
12 <body>
13 <p>圖像不會隨頁面的其余部分滾動。</p>
14 <p>圖像不會隨頁面的其余部分滾動。</p>
15 <p>圖像不會隨頁面的其余部分滾動。</p>
16 <p>圖像不會隨頁面的其余部分滾動。</p>
17 <p>圖像不會隨頁面的其余部分滾動。</p>
18 <p>圖像不會隨頁面的其余部分滾動。</p>
19 <p>圖像不會隨頁面的其余部分滾動。</p>
20 <p>圖像不會隨頁面的其余部分滾動。</p>
21 <p>圖像不會隨頁面的其余部分滾動。</p>
22 <p>圖像不會隨頁面的其余部分滾動。</p>
23 <p>圖像不會隨頁面的其余部分滾動。</p>
24 </body>
25 </html>
這個屬性就是通過background-attachment來控制的。
具體的效果如何，那就要自己動手了。
<5>在一個聲明中聲明多個屬性
1 <html>
2 <head>
3 <style type="text/css">
4 body
5 {
6 background:#ff0000 url(btful/888.jpg) no-repeat fixed center;
7 }
8 </syle>
9 </head>
10
11 <body>
12 <p>各個屬性間并無順序</p>
13 <p>各個屬性間并無順序</p>
14 <p>各個屬性間并無順序</p>
15 <p>各個屬性間并無順序</p>
16 <p>各個屬性間并無順序</p>
17 <p>各個屬性間并無順序</p>
18 </body>
19 </html>
其實這個做法是在你了解了前面的各個屬性之后的事情。
當你知道了前面的各個屬性再來用這種方法，無疑會簡化你的代碼，提高一定的效率。
posted on 2011-09-16 20:49 More study needed. 閱讀(61517) 評論(0) 收藏 舉報
浙公網安備 33010602011771號