how to add background property of 2 or more background

　　Recently I met a demand, recharge amount is a button below the background showing the state after clicking is also a background image, as shown below

　　According to the usual routine, add a class , click on the state you can write directly on the inside

　　However, after clicking, although state background Successful show up, but had disappeared button background

　　At this time, I suddenly remembered background can add 2 or more background, then the code is modified as follows,

　　I thought you're done, click the background behind the results of the state can not show up, I began to square up!

　　After thinking it over, suddenly a flash, is it the order of these two background images should reverse it? (Above me is to put the button in front of a background, the background to put the state back)

　 Then try holding the mentality of the background after the discovery of reverse order, click on the background and status buttons can be displayed normal background

　　Multi-background example, you can replace the image path

<!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>

how to add background property of 2 or more background

Guess you like