html - 使部分填满整个屏幕

Question

您好，我正在尝试创建一个具有 100% 宽度和高度的英雄部分。我知道关于这个话题有很多问题，但似乎没有一个对我有用。我想要实现的是用户首先看到的带有图像和一些文本的部分。当用户滚动时，将显示网站的其余部分。 当我运行我的代码时，我在图像周围出现白条，并且我尝试将边距设置为 0px 但我不起作用。 抱歉英语不好。 这是我的一些代码:

HTML:

<section id="hero-section">

<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
<a href="#name-section" class="button"></a>

</section>
</body>

CSS:

body, html{
height: 100%;
}

#hero-section{
background-image: url(../Images/Lake.jpg);
background-size: cover;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

截图: http://postimg.org/image/qsutt7d6n/

Answer 1

我在我的 jsfiddle 中测试并正常工作:

HTML 是一样的:

<section id="hero-section">

<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
<a href="#name-section" class="button"></a>

</section>

我更改了 CSS，将 background-image 更改为 background-color 以进行测试并添加了“*”选择器:

* {
    margin:0;
}
body, html {
    height:100%;
}
#hero-section {
    background-color: red;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

请在此处查看示例:http://jsfiddle.net/yv3vkqfw/