我需要帮助在网页上定位两个图像。我希望两个图像都固定在页面上,因此一个将固定在页面的左上角,另一个将固定在右下角。但我也希望背景是黑色的,所以如果有很多文字或内容,那么两个图像都会变长。以下是帮助解决问题的图片。
http://www.imagecross.com/11/image-hosting-view-53.php?id=4949contextual.png
答案 0 :(得分:0)
<div id="topLeft"></div>
<div id="bottomRight"></div>
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;
}
调整高度和宽度以品尝
答案 1 :(得分:0)
快速浏览 - 将右下方的图像附加到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;
}