1

我有两个背景图像。如果页面上的信息太多，我希望它们固定在屏幕底部或页面底部。我只能对其中一种情况进行编码 - 背景图像固定在屏幕底部或页面底部（body {}）。

body {
    line-height: 1;
    background-attachment:scroll;
    background-image:url(images/fonskreisapuse.png), url(images/fonslabapuse.png);
    background-repeat:no-repeat;
    background-position:bottom left, bottom right;
}

在第一张图片中，背景图片固定在正文的底部：http: //www.bildites.lv/viewer.php?file=ivbdtsimebot29u96rs8.jpg

在这张图片中，背景固定在屏幕底部： http: //www.bildites.lv/viewer.php?file=yzrixvjqec2qe3fgu396.jpg

如果图片固定在屏幕底部，我将页面向下滚动以查看问题。如果页面上的信息不多，或者如果信息足以向下滚动，我想将背景图像固定到屏幕底部。而且我不希望背景图像一直固定在屏幕底部，因为它会与主要内容混合。

几天来我一直在尝试解决这个问题，但我无法让它像那样工作。

4

1 回答 1

0

像这样的东西？

<!DOCTYPE html>
<html>
<head>
<style>
html{
    min-height:100%;
    background-attachment:scroll;
    background-image:url(https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg), url(https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg);
    background-repeat:no-repeat;
    background-position:bottom left, bottom right;
}
body {
    line-height: 1;
    padding-bottom:200px;
}
</style>
</head>
<body>
<p>sample text</p>
<script>
addContent = function(){
    var p = document.createElement('p')
    var b = document.getElementsByTagName('body')[0]
    var t = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tincidunt urna at ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id mauris arcu, sit amet suscipit sem."
    var l = new Array(10)
    p.appendChild(document.createTextNode(l.join(t)))
    b.appendChild(p);
    return false
 }
</script>
<a href="#" onclick="return addContent()">add content</a>
</body>
</html>
于 2013-03-21T23:49:53.640 回答