0

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

我想出了这两个错误的解决方案。首先，使用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" />

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

实现的例子

4

1 回答 1

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 来处理如果不应用它可能会弄乱你的网站的东西（优雅降级和所有），所以这可能是我会去的方式......

于 2013-07-10T22:37:47.073 回答