Question

我需要这个网站的项目帮助......

我尽力减少一切。但我需要我的滚动背景垂直拉伸整个屏幕而不仅仅是顶部。

这是托管在外部服务器上的网站，直到我解决了这个问题，所以我可以将它迁移到我的真实服务器......

http://jacksonmilburn.bitballoon.com

问题在于，如果你一直缩放，你可以在底部看到白色。

这是我的CSS代码：

.sliding-background {
background: url("images/bg.jpg") repeat-x;
height: 1080px;
width: 27162px;
animation: slide 60s linear infinite;
}

@keyframes slide{
0%{
  transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-9054px, 0, 0);

这是我的HTML代码：

<div  

class="sliding-background"
 ></div>

Answer 1

问题是您使用宽度和高度作为像素把它们变成：

width: 100%;
height: 100%;

这将使图像变大并使其响应您的浏览器窗口大小也尝试使用此代码使您的图像成为完整的背景：

.sliding-background {
  background: url("images/bg.jpg") repeat-x;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

正如@Sora所说，你的div应该填满父母的身高。

使用此风格：

.sliding-background {
    position: absolute; /*Usually height: 100% does not work if your div is not absolute or fixed.*/
    height: 100% !important; /*Stretch the height of the element*/
    width: 10000%; /* Really lengthy width */

    /*Your style*/

    /*background-size: cover;*/ /*Just stretching the element's height is not sufficient - So you have to tell the browser to scale the background of the div to cover the all visible area (by stretching proportionately)*/
    background-size: contain; /* This tries to fit the image in the div area - since the div's width is too great. It always fills vertically. */
}

我建议你用百分比替换宽度。

<强>更新

这种方法最好更好，

.sliding-background {
    position: absolute;
    height: 100%;
    width: 100%;

    /*Your style*/

    background-size: auto 100%; /* Make sure you call background-size after the background. */
}

动画background-position-x代替transform:translate(x, y);

即，

@keyframes slide{
    0%{
        background-position-x: 0px;
    }
    100%{
        background-position-x: -9054px; /* or something */
    }
}

注意：您会看到，在第一个实现中，页面可以水平滚动。我建议你选择第二个实现。

希望这有帮助。

Html CSS滚动背景全屏

2 个答案: