背景圖：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景圖</title> <style type="text/css"> body ,html { padding: 0px;margin: 0px;} body { background-image: url("images/0.png"); } .main { width: 80%; height: 100px; margin: 0 auto; border: 1px solid #ffff00; } </style> </head> <body> <div class="main"> 內容在背景圖片上。 </div> </body> </html> 還有控制背景圖片的屬性： background-position: top center ;/*向上對齊，左右居中*/ background-repeat: no-repeat;/*平鋪與否*/
background-size:contain;/*可參見http://www.w3school.com.cn/cssref/pr_background-size.asp*/
img標籤做：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景變img圖</title> <style type="text/css"> body {padding: 0px; margin: 0px;} .mainBody { width: 100%; } .divImg { position: absolute; } .main { width: 300px; height: 100px; border: 1px solid #ffff00; position: absolute; left: 20px; top: 10px; } </style> </head> <body> <div class="mainBody"> <div class="divImg"> <img src="images/0.png"> </div> <div class="main"> img作爲“背景圖片”。 </div> </div> </body> </html> 設置position:absolute;定位後，脫離了文檔流，要用偏移量來設置位置。 left: 20px; top: 10px; 等價於 margin-left: 20px; margin-top: 10px;