如何使图像填满屏幕然后能够滚动到另一个图像答案

【问题标题】：How can I make an image fill the screen and then be able to scroll to another image如何使图像填满屏幕然后能够滚动到另一个图像
【发布时间】：2014-12-04 03:38:41
【问题描述】：

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

【问题讨论】：

看起来该站点使用了一些花哨的 javaScript。它对光标位置等的反应方式无法在 CSS 中完成。
好吧，这就是我害怕的。感谢您确认！
部分页面使用了花哨的js，但你想要的不需要花哨的js。

标签： css

【解决方案1】：

除了示例中图像的视差之外，您可以使用来自 Roko C. Buljan 的 answer 的部分内容和以下代码来接近。

演示：https://jsbin.com/xoxede

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>

【讨论】：