如何在网页的第一部分展示一个背景图片并让它覆盖整个屏幕可见区域？

Question

我是新手开发者，被分配了一个看起来有点具有挑战性的任务。

我需要创建一个单页面网站，在导航栏中包含关于我们和联系我们的链接。当用户点击关于我们时，用户的屏幕应该滚动到页面上的该部分，联系我们也是如此。我已经成功地完成了这个任务。

我需要帮助的是什么？

我正在使用一张背景图片，我想让它覆盖用户的屏幕宽度和高度，这样如果用户的屏幕更大，则不会显示第二个部分。

这是我堆叠东西的方式：

<div class="header">
<img class="logo" src="/logo.jpg">
<a href="#about" class="link">
<a href="#contact" class="link">
</div>
<div class="part1">
some content
</div>
<div class="part2" aboutus" id="about">
About us
</div>
<div class="part3 contactus" id="contact>
Contact us
</div>

第一部分和页眉是用户看到的第一件事。

问题：

如何显示仅出现在part1中并覆盖整个屏幕宽度和高度的背景图片，无论其大小？我知道我需要JQuery或某些CSS结构，但不确定从哪里开始。

我该怎么做才能实现这一目标？

- ariel

Answer 1

 .part1{
    background: url(http://someurl.com/someimg.png);
    background-size: 100% 100%;
    width:100%;
    height:100%;
 }

设置背景大小并将div设置为全屏高度和宽度

- Patrick Evans

Answer 2

HTML（超文本标记语言）

<div id="wrapper">

  <div class="header">
    <div class="header-wrapper">
      <img src="logo.jpg" class="logo"/> 

      <a href="#" onClick="scrollContent('about')" class="about">About</a>
      <a href="#" onClick="scrollContent('contact')" class="contact">Contact</a>
    </div>
  </div>

  <div class="part1">
    <div class="part1-wrapper">
        <!-- some content -->
    </div>
  </div>

  <div class="part2 about" id="about">
    <div class="part2-wrapper">
      <!-- About us -->
    </div>
  </div>

  <div class="part3 contactus" id="contact">
    <div class="part3-wrapper">
       <!-- Contact us -->
    </div>
  </div>

</div>

CSS (层叠样式表)

#wrapper {
  padding-top: 35px;
}
.header {
  background: #666;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  z-index: 9999;
}
.header a {
  float: left;
  margin: 8px 18px 0 0;
  font-family: Verdana;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 1px;
  color: #fff;

  transition: color 0.2s ease-in;
}
.header a:hover {
  color: #ddd;
}
.logo {
  float: left;
  margin-right: 30px;
}
.part1,
.part2,
.part3 {
  position: relative;
  width: 100%;
 }
.part1 {
  background: #aaa;
}
.part2 {
  background: #ccc;
}
.part3 {
  background: #eee;
}
.part1-wrapper,
.part2-wrapper,
.part3-wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 10px;
}

jQuery

function scrollContent(id) {
  $( 'html, body' ).stop().animate({ scrollTop: $( '#' + id ).offset().top }, 1200 );
}

$(function () {

  var parts = $('.part1, .part2, .part3');

  parts
    .css({
      height: $(window).innerHeight(),
      width: $(window).innerWidth() 
    });

});

jsFiddle - http://jsfiddle.net/mdesdev/VJxeH/

jsFiddle是一个在线代码编辑器和调试工具，可以让用户在浏览器中编写HTML、CSS和JavaScript，并与其他人分享他们的代码。这个链接指向一个示例jsFiddle页面。

- Milan and Friends

---

请解释这里在发生什么。我一点头绪都没有。 - iConnor

@ariel 问道：“我怎样才能在part1中显示一个背景图片，使其覆盖整个用户屏幕的宽度和高度，无论大小如何？” - Milan and Friends

是的，我并没有说它不正确，我是说我不理解它在做什么/如何工作。 - iConnor

@Pinocchio 使用jQuery为part1设置背景图像，然后动态设置part1的高度，并在窗口大小调整时更新part1的高度。请查看fiddle。附注：我已经编辑了几次fiddle ;) - Milan and Friends

Answer 3

CSS：

.part1 {
    background: url(bkgd.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}

JS：使用jQuery

$(window).resize(function () {
    $(".part1").css("min-height", $(window).height());    
}); 
$(document).ready(function () {
    $(".part1").css("min-height", $(window).height());
});

请查看更新的演示

更新： 使用background-size设置为cover关键字调整.part的背景大小，并将其居中显示。还使用jquery动态将.part的最小高度设置为窗口高度，以适应视口。

- Vahid Hallaji

---

谢谢，但这并没有解决part2仍然可见的问题。 - ariel

@ariel 你能看一下演示并说出问题在哪里吗？ - Vahid Hallaji

第一部分应该覆盖用户的整个屏幕，无论高度和宽度有多大。我不确定如何做到这一点。 - ariel

是的，这样即使用户有一个非常大的屏幕，part1仍然会覆盖整个屏幕。谢谢理解Vahid。 - ariel

@Pinocchio 抱歉信息不够详细，是我的过错。已经更新。 - Vahid Hallaji