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-color进行测试并添加＆＃34; *＆＃34;选择器：

* {
    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/

使部分填满整个屏幕

1 个答案: