Question

我正在尝试了解如何使用CSS3定位多个背景图像。我做得不好。如何将图像定位在页面顶部，页面中间和页面底部？我们只是使用100px x 100px块来进行说明。我只能把它们放在顶部。

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>

使用CSS3的多个背景图像

1 个答案: