Question

我正在尝试构建一个使用多个背景和CSS动画的页面，以在后台创建图像滑块。换句话说，我有一个具有多个背景的元素，然后我使用CSS3动画来改变每个元素的背景位置以产生图像滑块效果，即图像一次滑入一个，在屏幕上停留一段时间，然后滑动当另一个人滑入时。

这似乎工作正常，直到我使用background-size更改图像的尺寸以使图像适合屏幕。由于我的网站完全响应并需要处理多种分辨率，因此这是必须的。

我发现this article触及了这个问题，但他们的修复似乎并不适用于我。

以下是我的代码示例（PS：我正在使用画布，出于其他原因，我正在应用背景，因此我可以在背景图像上绘制。不知道它是否可能部分问题）：

HTML

<canvas id="bgCanvas" width="100%" height="100%"></canvas>

CSS

    #bgCanvas {
        width: 100%;
        height: 100%;
        background-size: cover;
        z-index: 1;
        position: fixed;
        background-repeat: no-repeat;
        -webkit-animation: bgSlider 16s linear infinite;
        background-image: url(/cards/be538ab8-972d-41c7-84d7-2abf0aa96e21/Images/cycling1.jpg),   
        url(/cards/be538ab8-972d-41c7-84d7-2abf0aa96e21/Images/running4.jpg), 
        url(/cards/be538ab8-972d-41c7-84d7-2abf0aa96e21/Images/running3.jpg), 
        url(/cards/be538ab8-972d-41c7-84d7-2abf0aa96e21/Images/running2.jpg);
    }
    @-webkit-keyframes bgSlider{
        0% { background-position: 0 0, 100% 0,  100% 0, 100% 0; }

        21% { background-position: 0 0, 100% 0,  100% 0, 100% 0; }
        25% { background-position: -100% 0, 0 0,  100% 0, 100% 0; }

        46% { background-position: -100% 0, 0 0,  100% 0, 100% 0; }
        50% { background-position: -100% 0, -100% 0,  0 0, 100% 0; }

        71% { background-position: -100% 0, -100% 0,  0 0, 100% 0; }
        75% { background-position: -100% 0, -100% 0,  -100% 0, 0 0; }

        96% { background-position: -100% 0, -100% 0,  -100% 0, 0 0; }
        100% { background-position: 0 0, -100% 0,  -100% 0, -100% 0; }
}

非常感谢任何建议。

多个背景，CSS3动画和背景大小

0 个答案: