【问题标题】:Trying to stretch background to 100% height尝试将背景拉伸到 100% 高度
【发布时间】:2013-05-10 09:38:26
【问题描述】:

我正在尝试创建一个完整的页面 div(具有 100% 的宽度和高度)。但在 Firefox 中,它并没有完全伸展。这是我的代码:-

div{
    background:url('image.jpg')no-repeat fixed;
    background-size:cover;
 }

我试过很多,但我不知道哪里出了问题。

【问题讨论】:

标签: html css


【解决方案1】:

实际上,您的 CSS 本身并没有什么问题,但为了使其正常工作,您需要(不幸的是)添加浏览器前缀
尝试添加

 div{
    background:url('image.jpg')no-repeat fixed;
    background-size:cover;
    -moz-background-size:cover;
  }

【讨论】:

  • 确实你是一个懒惰的程序员:P 你也应该在你的答案中添加其他跨浏览器属性..
  • 这是错误的,Firefox 从版本 4 开始支持这个不带前缀的 CSS 属性:caniuse.com/background-img-opts
【解决方案2】:

请务必设置html, body 的高度。

默认情况下,htmlbody 元素不会占据窗口的整个高度。您必须明确设置 html, body 的高度以强制它们跨越窗口的整个高度。

html, body {
    height:100%;
}

通过强制html, body 占据窗口的整个高度,然后将div { width:100%; height:100%; } 作为body 元素的子元素,您可以确保div 将拉伸到窗口的100%宽度和高度。

这是一个例子:http://jsfiddle.net/ewF8M/

【讨论】:

    猜你喜欢
    • 2018-04-09
    • 1970-01-01
    • 2012-03-21
    • 2011-07-17
    • 1970-01-01
    • 2016-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多