最近遇到一個需求，下面充值金額按鈕是一個背景圖，點擊之后顯示的狀態也是一個背景圖，如下圖
按照慣用的套路，新增一個class，點擊后的狀態直接寫在里面即可
然而點擊后，雖然狀態背景成功顯示出來，但按鈕背景卻消失了
此時，我突然想起background可以添加2個或多個背景，於是修改代碼后如下，
本以為大功告成，結果點擊后的狀態背景都無法顯示出來，我開始方了！
思前想后，突然靈光一閃，難道是這2個背景圖的順序應該顛倒嗎？（上面我是把按鈕背景放前面，狀態背景放后面）
然后抱着試一試的心態把背景圖順序顛倒之后發現，點擊后狀態背景和按鈕背景都能夠正常顯示出來
多背景實例，替換圖片路徑即可
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>多背景實例</title> <style> .bg { width: 600px; height: 500px; border: 1px solid; background-image: url("img/1.jpg"), url("img/2.jpg"), url("img/3.jpg"), url("img/4.gif"), url("img/5.jpg"); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right, center center; } </style> </head> <body> <div class="bg"></div> </body> </html>