Question

我正在尝试建立一个我自己的网站，我的网站在最初加载时会覆盖整个页面。我希望它能够响应，这样我就可以看到整个背景图像而不管屏幕大小。

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

Answer 1

您在Fifthree.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插件，允许您将动态调整大小的背景图像添加到任何页面。图像将拉伸以适合页面，并随着窗口大小的变化自动调整大小。

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

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

无论如何，请检查链接：）

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

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

2 个答案: