【问题标题】:How to show full height background image?如何显示全高背景图像?
【发布时间】:2013-09-24 23:01:25
【问题描述】:

我有一张宽 979 像素、高 1200 像素的照片类型(不是横向)背景图片。我想将其设置为向左浮动并固定显示 100% 的完整图像高度,而无需向上/向下滚动(无论内容长度如何)。

这是我的 CSS 代码,但它不起作用:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

【问题讨论】:

标签: css image background


【解决方案1】:

您可以使用您拥有的代码来做到这一点,您只需确保将htmlbody 设置为100% 高度。

演示:http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

【讨论】:

  • 谢谢。我一直想知道为什么这会时不时地起作用。现在我知道了:D
  • 非常好!要知道或者可能是我从未预料到的重要事实,这就是为什么我有点惊讶。所有的操作,你应该在设置background-image之后进行。我之前设置了background-size,但它不起作用。
【解决方案2】:

CSS 可以通过 background-size: cover;

做到这一点

但要更详细,支持更多浏览器...

像这样使用纵横比:

 aspectRatio      = $bg.width() / $bg.height();

FIDDLE

【讨论】:

    【解决方案3】:
    body{
        background-image: url("../images/shape/Online_Do`kon.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%; 
        height: 100vh;
    }
    

    这将创建完全响应的图像并显示 100% 的图像高度,但实际上不会覆盖全屏高度

    【讨论】:

    • 很好的解决方案。 100vh 很好。
    • 这会破坏纵横比
    【解决方案4】:
     html, body {
        height:100%;
    }
    
    body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    

    【讨论】:

      【解决方案5】:

      这对我有用(尽管它适用于用作内联 CSS 的 reactjs 和 tachyons)

      <div className="pa2 cf vh-100-ns" style={{backgroundImage: `url(${a6})`}}> 
      ........
      </div>
      

      这会将 css 作为 height: 100vh

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-07-14
        • 1970-01-01
        • 2013-04-30
        • 2014-11-24
        • 2015-03-15
        相关资源
        最近更新 更多