底部固定图像，如附图所示

Question

如下面的截图所示，我想放置一个底部固定图像，它应该出现在（而不是超过）一些内容（徽标和中心描述文本）之后。此图片应适合屏幕的宽度。

我想出了这两个错误的解决方案。首先，使用 CSS background-size 属性：

// CSS
.bg {
    width: 600px;
    height: 300px;
    position: fixed;
    bottom: 0;
    left: 0%;
    background: url('image.jpg') no-repeat center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

// HTML part
<div class="bg"></div>

其次，使用一点 Javascript 并识别窗口的调整大小并在图像标签上设置一些 css 属性：

// JS
        // some magick here...
        if ((win_w / win_h) < ($bg.width() / $bg.height())) {
          $bg.css({height: '100%', width: 'auto'});
        } else {
          $bg.css({width: '100%', height: 'auto'});
        }

// HTML Part (I'm using a shim)
<img class="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: relative; left: 0; bottom: 0" />

这些解决方案有效，但我不希望图像覆盖（或成为其背景）徽标和说明。你能帮帮我吗？

Answer 1

可能是这样的：http://jsfiddle.net/

我做了什么：

• 我首先应用了一个粘性页脚：http://ryanfait.com/sticky-footer/
• 然后我为背景添加了一个额外的 div（在内容包装器中，但这不是必需的）
• 我将背景 div 定位为绝对值，顶部等于其上方内容的高度（徽标和其他您不希望背景位于后面的内容），底部等于页脚的高度。左右我设置为 0 以使其占据整个宽度。
• 我应用了您已经知道的background-size: contain（在我的示例中仍然需要前缀）

背景的 css 如下所示：

#background {
    background: url(...) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 30px; /* height of content above */
    bottom: 50px; /* height of content beneath */
    left: 0;
    right: 0;
    z-index: -1; /* to position it under the content, but as no content is covering it, you could leave it out as well */
}

通常我不喜欢只为样式添加空 div，但我在这里并没有真正看到其他解决方案。我更不喜欢使用 javascript 来处理如果不应用它可能会弄乱你的网站的东西（优雅降级等等），所以这可能是我要走的路......