3

我是开发新手，我的任务似乎有点挑战性。

我必须创建一个单页网站，在导航中我有关于我们和联系我们的链接。当用户单击关于我们时，用户的屏幕应滚动到页面上的该部分，并与我们联系。我能够做到这一点。

我需要什么帮助？

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

这就是我堆叠东西的方式：

<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>

因此，第 1 部分是用户与标题一起看到的第一件事。

问题：

如何显示仅出现在第 1 部分中并覆盖用户屏幕的整个宽度和高度的背景图像，无论它有多大。 我确定我需要 JQuery 或一些 CSS 结构，但不知道从哪里开始。

我该怎么做才能做到这一点？

4

3 回答 3

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

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

于 2013-08-24T22:03:20.573 回答
1

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());
});

查看演示更新

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

于 2013-08-24T22:01:21.150 回答
1

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/

于 2013-08-30T23:09:04.567 回答