Question

任何人都知道这个页面是如何做到的。看着同样的想法。

http://whois.domaintools.com/

如果您注意到沙漠的图片将始终覆盖我的整个浏览器屏幕。但是，这不像常规全屏背景，因为我向下滚动背景图像的那一刻结束。

有没有人对他们如何实现这一目标有任何想法？感谢：））

Answer 1

这是基本的例子。

纯CSS

＆＃13;

*,html{
  padding:0;
  margin:0;
}
html,body{
  height: 100%;
}
.banner {
  background: url('http://whois.domaintools.com/images/backgrounds/dark-desert-hills.jpg') no-repeat top center scroll;
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

＆＃13;

<div class="banner"></div>

＆＃13;

演示小提琴：https://jsfiddle.net/nikhilvkd/3uLrqfz8/1/

<强> Jquery的

＆＃13;

$(window).on("resize", function() {
  //banner height
  $('.banner').height($(window).height());
}).resize();

＆＃13;

*,html{
  padding:0;
  margin:0;
}
.banner {
  background: url('http://whois.domaintools.com/images/backgrounds/dark-desert-hills.jpg') no-repeat top center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner"></div>

＆＃13;

小提琴演示：https://jsfiddle.net/nikhilvkd/3uLrqfz8/

Answer 2

它有CSS样式：

position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;

用于id为＆＃34的画布;蜘蛛＆＃34;大声笑（使用检查元素）

Answer 3

我使用jQuery来确保容器始终是视口的高度。这也很好地反应了;

    vpw = $(window).width();
    vph = $(window).height();
    $(".your-container").css({"height": vph + "px"});

我在此处使用的网站示例：http://startnetwork.org/

提示：

将其添加到窗口调整大小功能以处理设备上的用户切换方向，例如。 ipad公司

$(document).ready(function(){
  function resize () {
        vpw = $(window).width();
        vph = $(window).height();
        $(".your-container").css({"height": vph + "px"});
  }

  resize();
});

Answer 4

背景代码来自GreenSock

实际执行任务的代码已被提取到他们自己的自定义Javascript文件.

Here is the JSFiddle demo

仅适合一个全屏的背景图片

4 个答案: