4

好吧，我多年来一直在尝试解决这个问题。我尝试了许多不同的解决方案，但发现自己再次面临同样的问题，我真的很想向社区寻求解决这个问题的最佳方法。

我想在我的页面背景上有两个图像：1 作为 xy 平铺的“纹理”，另一个图像将拥抱整个页面的右下角，无论页面高度如何。因此，页面将如下所示：

在此处输入图像描述

这不是通过我的 CSS 中的背景 img() 完成的，而是在页脚附近使用图像完成的，如下所示：

<style>
.specialImage{
  position: absolute;
  bottom:0;
  right:0;
  z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />

这样做的问题是，如果页面比屏幕长，就会发生这种情况：

在此处输入图像描述

不好。将位置更改为“固定”会导致它产生“粘性”效果，这是我不想要的。所以这条路走不通。

路线2：CSS后台解决方案。不幸的是，这段代码不起作用：

body {
  color: #333333;
  background: 
    url("/static/assets/img/fabric_1.png"),
    url("/static/assets/img/stain.png");

  background-repeat: repeat,
    no-repeat;

  background-position: 0 0,
  right bottom;
}

所以，我尝试了这个：

   html{
     background:
     url("/static/assets/img/fabric_1.png");
     background-repeat: repeat;
     background-position: 0 0;
   }

   body {
     background:
       url("/static/assets/img/stain.png");

     background-repeat:
                no-repeat;

     background-position:
                right bottom;

   }

对于长页面，哪个有效！万岁！但是，当我回到短页面时，现在它看起来像这样：

在此处输入图像描述

王八蛋！

那么这里的解决方案是什么？粘性页脚？最小高度？包装纸？到目前为止，我尝试过的解决方案都没有在这两种情况下产生所需的行为。

StackOverflow前辈，我该怎么办？

谢谢！，R

4

5 回答 5

1

据我了解，您想将背景图像粘贴到底部和右侧？所以解决方案是：

body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
于 2013-01-17T06:44:57.113 回答
1

嗯，使用 css3 你可以使用多个背景。你能试试这个吗？

html{
     background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
     background-repeat: repeat, no-repeat;
     background-position: 0 0, right bottom;
   }

   body {
     color: #333333;
   }
于 2013-01-17T07:16:33.643 回答
1

遇到同样的问题，我的解决方案涉及将 html 元素设置为具有 100% 的最小高度和自动高度：

body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}

body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

较短的页面被强制到查看窗口高度，较长的页面获取自动高度。

于 2013-08-02T14:56:41.250 回答
0

您始终可以将 body 的高度设置为 100%，然后它应该可以工作。

澄清一下：然后你可以在 html 元素和 body 元素中有一个背景图像，就像你已经尝试过的那样：

html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}

body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}

只是测试了一点，它似乎在 IE10 的 Internet Explorer 5 怪癖模式下不起作用，但我真的希望这对你来说不会破坏交易，因为你似乎没有使用奇怪的遗留产品。

紫色方块是 html-background-image，红色是 body-background-image。

紫色方块是 html-background-image，红色是 body-background-image。

于 2013-01-17T11:10:03.610 回答
0

感谢您的发表。我遇到了同样的问题。我通过将背景图像添加到我的内容设置为 100% 宽度的容器 div 来解决它。容器在我的页脚之前关闭，但如果您需要将图像放在页面底部，您也可以尝试将其放在页脚之外。我只希望我的内容位于内容的右下角。

这是我的 div 结构：

<html>                    Background image
<body>                    Padding
<div id="outerWrapper">   Background applied outside content
<div id="borderWrapper">  Contains content
<div id="contentWrap">    Sets up container positioning for child elements
于 2014-03-16T16:40:30.690 回答