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;
}