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制作一張復合圖就行。