一、背景顏色 background-color

1

<div style="background-color:#FFBB73">CSS background-color #FFBB73</div>
CSS background-color #FFBB73
1

<div style="background-color:pink">CSS background-color pink</div>
CSS background-color pink
1

<div style="background-color:rgb(232,106,192)">CSS background-color RGB 232,106,192</div>
CSS background-color RGB 232,106,192

二、背景圖片 background-image

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

1. 網頁背景圖片

<html>

<head>
<style type="text/css">
body
{ 
background-image: 
url('要顯示的圖片網址');
background-repeat: repeat-x repeat-y;
background-color: 背景顏色;
}
</style>
</head>

<body>
</body>

</html>

2. 區塊背景圖片

<style>
#DIV1{
width:300px;
height:200px;
background-color:lightskyblue;　//淡藍色背景
border:1px #ccc solid;
}
#DIV2{
width:300px;
height:200px;
background-image:url(/images/b01.png);　//插入背景圖片
background-color:lightskyblue;　//淡藍色背景
border:1px #ccc solid;
}
</style>
<div id="DIV1">
這是沒套用背景圖片的 DIV 區塊
</div>
<div id="DIV2">
這是有套用背景圖片的 DIV 區塊
</div>

--- 簡言之 ---
<div style="background-image:url(背景圖片);width:380px;height:120px;">
這個 DIV 區塊使用 300x120 的背景圖片
</div>

這是沒套用背景圖片的 DIV 區塊
這是有套用背景圖片的 DIV 區塊