css背景图像定位

Question

我需要帮助在网页上定位两个图像。我希望两个图像都固定在页面上，因此一个将固定在页面的左上角，另一个将固定在右下角。但我也希望背景是黑色的，所以如果有很多文字或内容，那么两个图像都会变长。以下是帮助解决问题的图片。

http://www.imagecross.com/11/image-hosting-view-53.php?id=4949contextual.png

Answer 1

示例html

<div id="topLeft"></div>
<div id="bottomRight"></div>

CSS：

BODY {
    background-color: black;
}

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottomRight {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    bottom: 0px;
    right: 0px;
}

调整高度和宽度以品尝

Answer 2

快速浏览 - 将右下方的图像附加到body标签（带背景颜色），并将body和html高度设置为100％，如下所示：

html { 
        min-height: 100%;
}

body { 
        background: url('http://cvcl.mit.edu/hybrid/cat2.jpg') no-repeat bottom right #000;
        height: 100%;
}

然后你可以像往常一样在任何div中设置左上角的图像，如bemace建议的那样：

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}