Question

当我来到我正在处理的网站时，无论浏览器的大小如何，我都试图让图像填满屏幕。然后，我希望用户能够将页面向下滚动到内容或其他图像。在这个网站上可以看到我正在尝试做的一个完美的例子：http://jackaroocaravans.com/。任何帮助是极大的赞赏。我试过让我的宽度和高度都达到100％并且没有做到这一点。我也试图让我的背景“封面”，覆盖整个屏幕，但我无法滚动。

Answer 1

除了示例中图像的视差外，您可以使用Roko C. Buljan的answer中的部分和以下代码来结束。

DEMO：https://jsbin.com/xoxede

enter image description here

<强> jQuery的：

视口的高度减去.header的高度是#page，#bg和.splash的大小。请参阅脚本。

$(window).on('resize load', function() {

    $('html').removeClass('no-js');
    $('body,html').css('opacity', '1');

    viewportheight = $(window).height();
    headerheight = $('.header').height();
    bg1 = '50';
    bg2 = $('header').height();

    $('.splash, #bg, #page').height(viewportheight) - (headerheight);
    $('.splash.intro, #bg').css({
        'background-position': bg1 + '% ' + bg2 + 'px'
    });

});


var images = [
    "http://121clicks.com/wp-content/uploads/2014/08/rammy_narula_photography_25.jpg",
    "http://ewallpapershub.com/wp-content/gallery/widescreen-wallpapers/widescreen-photography_wallpapers.jpg",
    "http://www.travelklix.com/wp-content/uploads/Amazing-Night-Cities-Photography5.jpg"
];
var $body = $(".intro"),
    $bg = $("#bg"),
    n = images.length,
    c = 0; // Loop Counter

// Preload Array of images...
for (var i = 0; i < n; i++) {
    var tImg = new Image();
    tImg.src = images[i];
}

$body.css({
    backgroundImage: "url(" + images[c] + ")"
});

(function loopBg() {
    $bg.hide().css({
        backgroundImage: "url(" + images[++c % n] + ")"
    }).delay(3000).fadeTo(1200, 1, function() {
        $body.css({
            backgroundImage: "url(" + images[c % n] + ")"
        });
        loopBg();
    });
}());

<强> CSS：

这是仅限演示的CSS。显然，文字和链接不会是白色的。

body,
html {
    margin: 0;
    padding: 0;
    color: #fff;
    font: 100%/300% sans-serif;
}

.no-js body {opacity:0;}

*,
*:before,
*:after {
    box-sizing: border-box
}
a {
    color: #fff
}
.header {
    background: #000;
    padding: 20px;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 3;
}
.splash {
    width: 100%;
    position: relative;
    display: table; /* for vertical alignment */
}
.intro {

}
.about {
    background-color: red
}
.contact {
    background-color: teal
}
.content {
    width: 100%;
    text-align: center;
    font-size: 300%;
    position: relative;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    z-index: 1;
    padding-top: 50px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0%; /*removes extra spacing */
}
nav ul li {
    display: inline-block;
    font-size: 16px;
}
nav ul li a {
    padding: 5px
}
footer {
    background: #444;
    padding: 20px;
    clear: both;
}
.splash.intro,
#bg {
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#bg,
#page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#page{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpiZGBg6GGAgEUggokBDTACsR6yAIYKgAADAE0GAWM9RhAyAAAAAElFTkSuQmCC);
}

HTML标记

<html class="no-js">

<强> HTML

<header class="header">
   <nav>
      <ul>
         <li><a href="#intro">intro</a></li>
         <li><a href="#about">about</a></li>
         <li><a href="#contact">contact</a></li>
      </ul>
   </nav>
</header>


<section class="splash intro" id="intro">

  <div class="content">Section 1</div>

  <div id="bg"></div>
  <div id="page"></div>

</section>

<section class="splash about" id="about">
   <div class="content">Section 2</div>
</section>

<section class="splash contact" id="contact">
   <div class="content">Section 3</div>
</section>

如何使图像填满屏幕，然后才能滚动到另一个图像

1 个答案:

DEMO：https://jsbin.com/xoxede