2

我得到了这个设计，我正试图将它应用到我的网站上。请注意，该<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;
}

那么为什么图像在这里粘在页面底部，而在这里却出现在页面的中间。

4

4 回答 4

4

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

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

html, body {
    height: 100%;
}

去掉它。或从您的样式表中覆盖它。

于 2012-12-01T17:16:59.243 回答
3

由于body { height: 100% }样式，它不适用于第二个站点。

静态/bundle-bundle_responsive_head.css：

html, body {
    height: 100%;
}
于 2012-12-01T17:15:09.737 回答
2

看起来第一个链接的计算高度设置为使图像位于底部，而对于图像出现在部分下方的链接，计算高度要低得多。 height: 170px;相比height: 2006px;

我不确定是什么为您设置了高度，但是将其分类将解决您的图像问题

编辑：实际上它似乎在这条规则中，它只在这些网站之一上：

media="screen, projection"
html, body {
   height: 100%;
}
于 2012-12-01T17:14:38.790 回答
2

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

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

于 2012-12-01T17:16:19.813 回答