Question

我想为我的英雄单位提供全尺寸背景。我使用了以下代码：

HTML

<div class="hero">
    <h1> hello world </h1>
</div>

CSS

.hero {
    background:url(../images/header1.png) no-repeat center center;
    background-size:cover;
    min-height:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
 }

我的解决方案的问题：背景只有我的标题。但是尺寸不应该取决于内容，它应该取决于观众的分辨率。

这是一个完美的例子：https://www.zirtual.com/这个英雄单位还有一个全屏背景图像。多数民众赞成的方式，我也想拥有它。

Answer 1

您必须为100%和body标记以及html课程设置.hero高度。

像这样：

body, html {
    height: 100%;
}

.hero {
    height: 100%;
    background: url("../images/header1.png") no-repeat center center;
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover;
    background-size: cover;
}

<强> JSFiddle Demo

Answer 2

确保你的html，身高和宽度都是100％。

全尺寸英雄背景不起作用

2 个答案: