css背景图片定位答案

【问题标题】：css background image positioningcss背景图片定位
【发布时间】：2010-10-19 17:22:02
【问题描述】：

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

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

【问题讨论】：

如果图片被张贴或链接到会很有帮助。

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

调整高度和宽度以适应口味

【讨论】：

@Mahie - 以什么方式？因为据我了解您的问题，它对我有用

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

【讨论】：