1、背景顏色
默認為transparent（透明）
（1）將背景設置為greenyellow：
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 150px; background-color: greenyellow; } </style> </head> <body> <div>今天是星期一</div> </body> </html>
2、背景圖片
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 150px; background-image: url(img/back.jpg); } </style> </head> <body> <div></div> </body> </html>
3、背景平鋪
如果要在html頁面上對背景進行平鋪，可以使用background-repeat屬性，屬性的值有：repeat、no-repeat、repeat-x、repeat-y，默認情況下是平鋪的
（1）平鋪：
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 300px; background-image: url(img/back.jpg); background-repeat: repeat; } </style> </head> <body> <div></div> </body> </html>
（2）延x軸平鋪：
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 300px; background-image: url(img/back.jpg); background-repeat: repeat-x; } </style> </head> <body> <div></div> </body> </html>
（3）延y軸平鋪：
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 300px; background-image: url(img/back.jpg); background-repeat: repeat-y; } </style> </head> <body> <div></div> </body> </html>
4、背景圖片的位置
可以使用方位名詞（top、center、bottom、left、center、right，如果是方位名詞，兩個位置名詞不區分先后順序）或者精確單位
（1）方位名詞
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 300px; background-image: url(img/back.jpg); background-repeat: no-repeat; background-position: center top; } </style> </head> <body> <div></div> </body> </html>
（2）精確單位（xy坐標又先后順序）
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 300px; background-image: url(img/back.jpg); background-repeat: no-repeat; background-position: 25px 40px; } </style> </head> <body> <div></div> </body> </html>
（3）混合單位
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 300px; background-image: url(img/back.jpg); background-repeat: no-repeat; background-position: center 40px; background-color: pink; } </style> </head> <body> <div></div> </body> </html>
5、背景固定
background-attachment：當屬性的值定義為scroll的時候背景圖片隨對象的內容滾動；當定義為fixed的時候，背景圖片固定
（1）一般的書寫方式
<html> <head> <meta charset="utf-8"> <title></title> <style> body{ width: 400px; height: 1300px; background-image: url(img/back.jpg); background-repeat: repeat; background-position: center 40px; color:red; 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> </body> </html>
當滾動鼠標的時候，文字滾動，圖片不動
（2）復合性的書寫方式：
上面的css代碼可以簡寫為：
<style> body{ width: 400px; height: 1300px; background: url(img/back.jpg) repeat fixed center 40px; color:red; } </style>
沒有先后順序的要求
6、背景顏色半透明
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 300px; background: rgba(0,0,0,0.2); } </style> </head> <body> <div>半透明顯示</div> </body> </html>
