logo标签列表

HTML/CSS：如何将第二个背景图片与页面右下角对齐

htmlcssbackgroundalignment
4

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

我想在我的页面背景上放置两个图像：一个作为xy平铺的“纹理”，另一个图像将紧贴整个页面的右下角，无论页面高度如何。因此，页面看起来像这样：

enter image description here

这不是通过CSS中的background 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" />

这样做的问题在于，如果页面比屏幕长，就会出现这种情况： enter image description here 不好。将位置更改为“fixed”会导致它具有“粘性”效果，而我不想要。所以这个方法行不通。
路线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;

   }

对于长页面，这个方法有效！太好了！ 但是当我回到短页面的时候，它看起来像这样：

enter image description here

该死的！

那么解决方案是什么呢？粘性页脚？最小高度？包装器？到目前为止，我尝试的所有解决方案都不能在两种情况下产生期望的行为。

StackOverflow老将们，我该怎么办？

谢谢！， R

抱歉，该内容不相关，请忽略。 - Rich Jones
请查看此链接：http://jsbin.com/ebaxig/4/edit。你的CSS是正确的，但我认为你可能缺少一些闭合标签，或者你的body内容没有一个div包装器。 - WeloSefer
@WeloSefer - 这会产生最后一张图片中的情景。另外，我相信你不是故意这样做的，但你似乎包含了一些SEO垃圾信息。 - Rich Jones
@Rich：这可能是需要改变设计的情况之一。 - Ianthe the Duke of Nukem
@RichJones，正如lanthe建议的那样，修改设计或使用Firebug的“检查”功能来查看您的元素排列情况。我并不是想包含slipsum A标签。这只是一个快速复制和粘贴。 - WeloSefer
5个回答
2

遇到相同的问题，我的解决方案是将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;
}

较短的页面会被强制调整为视窗高度，而较长的页面则会自动适应高度。
1

我理解您想将背景图像固定在底部和右侧？那么解决方案是：

body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
1
这会产生最后一张图片中显示的行为，对于短页面来说是不可取的。然而，对于大于屏幕尺寸的页面有效。 - Rich Jones
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;
   }
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背景图像，红色则是body背景图像。

The purple square is the html-background-image and the reddish is the body-background-image.

这对于第一个场景有效，但是对于超过100％的页面会产生第二个图像中显示的场景。 - Rich Jones
嗯，如果是这样的话，我不确定我理解问题了，请看这个链接：http://dunderburken.eu/foo/ 蓝紫色的东西是一个背景图片（重复出现），红色也是一张图片。我猜你想把红色放在另一个地方？ - Daniel Figueroa
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
稍微格式化一下。如果您想进行更改，请单击答案下方的[编辑]。我没有重新排序任何内容。注意在编写时顶部的工具栏。例如，**{ }**将突出显示的文本推入代码块中。（在每行开头添加4个空格。） - user13500
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接