Question

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

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

如果图片固定在屏幕底部，我会向下翻页以查看问题。我想让背景图像固定在屏幕的底部，如果页面上的信息不是那么多，或者如果信息足以让人畏缩，那么身体的底部就会固定。而且我不希望背景图像一直固定在屏幕底部，因为它会与主要内容混合。

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

Answer 1

这样的东西？

<!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>

屏幕底部或页面底部的背景图像

1 个答案: