使用 CSS3 的多个背景图像答案

【问题标题】：Multiple Background Images Using CSS3使用 CSS3 的多个背景图像
【发布时间】：2012-03-11 00:42:21
【问题描述】：

我正在尝试了解如何使用 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;
}

我希望它们在左上、左中和左下。

谢谢

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

我不希望这三个都排在首位。我希望它们在左上、左中、左下。
哦，是的，对不起，我错过了，因为你在所有三个中都名列前茅。 “center right no-repeat”使其居中，但使用图像的基线。我会编辑我的帖子。
忘了说，你只需要修改“#centerIMG”。代码使 div 居中，要使图像居中，您只需将边距设置为“减（半图像高度）”，就像我在示例中所做的那样。
我试过你的例子，但我不知道你想为我做什么。
代码将在中心“../images/blue.png”垂直对齐。您需要做的就是在#centerIMG 中更改高度、宽度和尺寸。