html - 使用 CSS3 的多个背景图像

Question

我想了解如何使用 CSS3 定位多个背景图像。我做得不太好。如何让图像位于页面顶部、页面中间和页面底部？我们只使用一个 100px x 100px 的 block 来进行说明。我只能让它们沿着顶部定位。

CSS

body {
background-image: 
url(../images/red.png), 
url(../images/blue.png), 
url(../images/yellow.png);
background-position: left top, center top, right top;
background-repeat: no-repeat;
}

我希望它们左上，左中，然后左下。

谢谢

Answer 1

您需要组合您的标签。

body {
    background-image: 
        url(../images/red.png) left top no-repeat, 
        url(../images/blue.png) center top no-repeat,, 
        url(../images/yellow.png) right top no-repeat, 
}

编辑:

<style type="text/css"> 

    background-image: 
    url(../images/red.png),  
    url(../images/yellow.png);
    background-position: left top, left bottom;
    background-repeat: no-repeat;

    #centerIMG {
        margin-top:-50px;
        height: 100px;
        width:  100px;
        background:url(../images/blue.png) center left no-repeat;
    }
    #outer {height: 100%; overflow: hidden; position: relative;}
    #outer[id] {display: table; position: static;}

    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

    #inner {position: relative; top: -50%} /* for explorer only */
</style>
    <div id="outer">
        <div id="middle">
            <div id="inner">
                <div id="centerIMG"></div>
            </div>
        </div>
    </div>

编辑:

<style type="text/css"> 
    body
    {
        background:
            url("red.png") top repeat-x,
            url("blue.png") bottom repeat-x,
            url("orange.png") center repeat;

            background-size: 200px, 100px;
    }
</style>