可以滚动的完整背景图像（最初固定）

Question

我正在尝试建立一个我自己的网站，在该网站上，我有一个背景图片，在最初加载时覆盖整个页面。我希望它也具有响应性，这样无论屏幕大小如何，我都可以看到整个背景图像。

这里有一个问题，当我滚动页面时，我希望下一个 div 或元素在下方（滚动时）准备就绪。我马上能想到的最佳参考是 fiftythree.com.

Answer 1

您在 fiftythree.com 上看到的仅仅是一个 div 具有视口高度大小和背景图像集。

要使图像根据屏幕尺寸缩放，请将其设置为background-size: cover。

.hero {
    background-color: salmon;
    /* background-image: url(...); */
    background-position: center;
    background-size: cover;
    color: #fff;
    height: 100vh;
    overflow: hidden;
}

.hero__title {
    margin-top: calc(50vh - 2em);
    text-align: center;
}

.wrapper {
    padding: 1em;
}

<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet"/>
<div class="hero">
    <h1 class="hero__title">Look at this</h1>
</div>

<div class="wrapper">
    <h2>Hello earthling</h2>
</div>

Answer 2

我前段时间也遇到过同样的问题，我用这个教程解决了它： http://responsivedesign.is/resources/javascript-jquery/back-stretch

Backstretch 是一个 jQuery 插件，可让您将动态调整大小的背景图像添加到任何页面。图像将拉伸以适合页面，并会随着 window 大小的变化自动调整大小。

它非常易于使用并且可以完成工作:)

CSS

#header{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Javascript

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});

  // Perhaps you'd like to change the image on a button click
  $(".button").click(function() {
      $.backstretch("/path/to/next_image.jpg");
  });
</script>

不要忘记将此复制到 html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>;

无论如何，请检查 link:)

编辑：http://srobbin.com/jquery-plugins/backstretch/更简单

可以滚动的完整背景图像（最初固定）

Full background image that can scroll (initially fixed)

html

css

responsive-design

web

responsive-interaction