多重背景,也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊加,縮寫時為用逗號隔開的每組值;用分解寫法時,如果有多個背景圖片,而其他屬性只有一個(例如background-repeat只有一個),表明所有背景圖片應用該屬性值。
語法縮寫如下:
background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的縮寫拆解成以下形式:
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color;
注意:
舉例:
有三張單獨的圖片:
使用多背景技術實現:
具體代碼實現,查看右側代碼編輯器(12-16行)。
在右側代碼編輯器窗口的第25-26行,輸入正確內容實現如下圖效果:
備注:這一小節沒有正確性驗證,請查看結果窗口與任務所給的結果圖片是否一致,從而判斷輸入代碼是否正確。
“右下角” or “50%” or “/”?
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報