Question

我收到了this design我正在尝试申请my website。请注意，<html>元素有一个背景图像（双手在空中），它粘在页面底部。

但是，当我将css文件迁移到我的应用程序时，出于某种原因，此图像显示在页面的中间位置。我检查了相关的CSS，在两种情况下都是：

html {
 background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../../img/bg.svg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    outline: 0 none !important;
}

为什么图片会粘在页面底部here，但会出现在页面的中间here。

Answer 1

您为height: 100%和html设置了body。这通常是为了能够具有全高度元素。但在这种情况下，这被证明是问题的原因。删除它可以解决问题。

签入Firebug或Chrome Inspector，您会看到以下内容：

html, body {
    height: 100%;
}

删除它。或者从样式表中覆盖它。

Answer 2

由于body { height: 100% }样式，它无法在第二个网站上运行。

静态/捆bundle_responsive_head.css：

html, body {
    height: 100%;
}

Answer 3

看起来设置第一个链接的计算高度使得图像位于底部，而对于图像显示部分向下的链接，计算的高度要低得多。 height: 170px;与height: 2006px;

相比较

~~我不确定是什么设置了你的高度，但将其排序将解决你的图像问题~~

编辑：实际上，这个规则似乎只在其中一个网站上：

media="screen, projection"
html, body {
   height: 100%;
}

Answer 4

看起来它实际上是身体标签上的背景图像没有粘到底部。关闭bundle-bundle-responsive-head.css中的height: 100%正文规则会修复它，但我不确定这会如何影响网站上的其他内容。

我通过在Chrome中使用DOM检查器并打开/关闭各种元素的规则来查看它们会产生什么效果。

图像不会粘在页面底部

4 个答案: