Question

所以我在CSS3编码视差效果，页面标题有3层。我的样式表如下：

#graphic-layer { /* overall properties for graphic layers */
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
#graphic-layer.header { /* header-class */
    width: 100%;
    height: 150px;
    background-repeat: repeat-x;
    -webkit-animation-name: header;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
#graphic-layer.header:nth-of-type(1) {  /* parallax layer 1 */
    background-image: url('images/header-background.jpg');
    -webkit-animation-duration: 100s;
}
#graphic-layer.header:nth-of-type(2) {  /* parallax layer 2 */
    background-image: url('images/header-middle.png');
    -webkit-animation-duration: 80s;
}
#graphic-layer.header:nth-of-type(3) { /* parallax layer 3 */
    background-image: url('images/header-foreground.png');
    -webkit-animation-duration: 60s;
}
@-webkit-keyframes header {  /* keyframes */
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0; /* <- PROBLEM HERE */
    }
}

编辑： HTML，只是带有类标题的图形图层的三个实例：

<div id="graphic-layer" class="header"></div>
<div id="graphic-layer" class="header"></div>
<div id="graphic-layer" class="header"></div>

到目前为止，这么好。请注意，我的标题是屏幕宽度的100％。如果我将关键帧的背景位置设置为100％background-position: 1920px 0;（我的屏幕/窗口宽度），那么这个工作完全正常，但是一旦窗口的分辨率发生变化，这显然将不再起作用。例如，如果我将值设置为500px，那么图片会移动500像素并跳回到开头，但我希望它能够连续移动而不会“跳跃”。

所以我需要一个解决方案让图像移动到标题宽度的100％，然后重新启动动画。但是当我将关键帧的背景位置设置为100％background-position: 100% 0;时，它根本不会移动。

这是什么问题？为什么百分比值不起作用？

修改

自己找到答案！

这只是推理中的一个愚蠢的错误。 #graphic-layer.header不必是标题的100％，而是100％的图像，这是一个静态值（在本例中为1920px）。因此，如果我将宽度设置为3480px（1920x2），然后将关键帧更改为以下内容：

@-webkit-keyframes header {  /* keyframes */
    0% {
        left: 0;
    }
    100% {
        left: -1920px; /* <- Image size */
    }
}

...然后标题类向左移动1920px并重新开始，因为类的宽度加倍，它看起来像是无穷无尽的图像。不需要相对百分比值！

CSS3背景位置百分比根本不起作用

0 个答案: