CSS3多背景圖片，也就是CSS2中的background屬性外加origin、clip和size組成的新background的多次疊加，縮寫時使用英文逗號隔開每組值。
舉例：為body元素設置兩張背景圖片
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3多背景圖片</title>
<style type="text/css">
div
{
width:400px;
height:200px;
border:1px solid silver;
background:url("../App_images/lesson/run_css3/frame1.png") bottom left no-repeat,
url("../App_images/lesson/run_css3/frame2.png") top right no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用以下2張圖片作為背景圖片：
背景圖片1
背景圖片2
這裡使用 CSS3多背景圖片，可以使得左下角一個圖片，右上角一個圖片。
background:url("../App_images/lesson/run_css3/frame1.png") bottom left no-repeat,
url("../App_images/lesson/run_css3/frame2.png") top right no-repeat;
其中background屬性是一個復合屬性，因此上述代碼等價於下述代碼：
background:url("../App_images/lesson/run_css3/frame1.png"), url("../App_images/lesson/run_css3/frame2.png");
background-position: bottom left, top right;
background-repeat:no-repeat,no-repeat;
很多時候不建議定義多背景圖片，直接使用PS制作一張復合圖就行。