Question

我的目标网页需要100vh / 100vw，无需滚动。背景是具有视差效果的图像，因此当鼠标移动时，图像会移动。

我正在努力研究如何使其发挥作用。对于视差图像，我目前有：

min-height: 100vh;
min-width: 100vw;

页面是100vh / 100vw，因为我需要它。问题是当图像移动时（鼠标移动），它不再覆盖页面。我需要使图像更大，以便它始终覆盖整个页面，但我需要保留一个没有滚动条的全屏页面。

这是问题的jsFiddle Demo。

Answer 1

您可以设置background-size: 200%或300%，使其尽可能大。

Answer 2

您是否尝试将背景div的边距设置为负数，将填充设置为正数？这将允许背景图像在其div上“溢出”。

Answer 3

如果使用img代码，则可以使用scale：

img {
  transform: scale(2);
}

JSFiddle演示：https://jsfiddle.net/9hej5acL/1/

如果使用background-image，您可以使用background-size缩放图片：

body {
  background-image: url('http://example.com/image.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200% auto;
}

JSFiddle演示：https://jsfiddle.net/4cw7qx2o/1/

Answer 4

以下是如何在没有滚动条的情况下保持整页的同时实现视差滚动效果：

首先，将身体（或包含视差图像的元素）的高度设置为100vh和overflow: hidden;。这样你可以保持100vw / 100vh的大小，同时仍然有一个更大的元素。

overflow:  hidden;
height: 100vh;

现在设置视差图像（.layer.layer-1）以占用所需的空间量。此外，将顶部和左侧边距设置为负数并填充为正数，以便此元素的起点位于视口之外。

min-height: 200vh;
min-width: 200vw;
margin-top: -100px;
margin-left: -300px;
padding-top: 100px;

$('#scene').parallax();

body {
  height: 100vh;
  overflow: hidden;
  background-attachment: scroll !important;
  background-color: transparent;
  margin: 0;
}
#scene {
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
    display: block;
    margin-bottom: 0px;
    padding-left: 0px;
    list-style: none;
    background-attachment: scroll;
}

.layer.layer-1 {
    transform: translate3d(-87.1px, -63.9px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    min-height: 200vh;
    min-width: 200vw;
    margin-top: -100px;
    margin-left: -300px;
    padding-top: 100px;
    background-image: url(http://uploads.webflow.com/5900af0a5f7f83692b682e4d/59468089c7312e4d8a190fa3_521477.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.layer.layer-2 {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-image: url(http://uploads.webflow.com/5900af0a5f7f83692b682e4d/5946831616c1f5436ec09e17_slice1.png);
    background-position: 50% 100%;
    background-size: cover;
    background-repeat: no-repeat;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/fjcsy7p5wuw8iij/jquery.parallax.js"></script>
<script src="https://daks2k3a4ib2z.cloudfront.net/5900af0a5f7f83692b682e4d/js/webflow.11254b67e.js"></script>

<body class="body">

<ul class="scene w-list-unstyled" id="scene" style="transform: translate3d(0px, 0px, 0px);transform-style: preserve-3d;backface-visibility: hidden;overflow: hidden;height: 100vh;">
<li class="layer layer-1" data-depth="1.00" style="position: relative; display: block; left: 0px; top: 0px; transform: translate3d(-78.5px, -55.7px, 0px); transform-style: preserve-3d; backface-visibility: hidden;"></li>
<li class="layer layer-2" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; backface-visibility: hidden;"></li>
<li class="layer layer-3" data-depth="0.50" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate3d(-39.25px, -27.85px, 0px); transform-style: preserve-3d; backface-visibility: hidden;"></li></ul>
</body>

这是一个jsFiddle来演示。

在没有滚动条的全屏页面上具有视差效果的图像

4 个答案: