Question

我正在尝试使用动画渐变覆盖图像，并将混合模式设置为相乘。动画是渐变通过背景在图像上移动：

HTML：

<html>
<body>
<header></header>
</body>
</html>

CSS：

header {
    width: 100%;
    height: 100%;
    background: linear-gradient(1deg, #db4b23, #f9c914, #36aa50, #f2dc78, #155588, #0096c3),
                url('<?=$post_thumbnail_url?>');
    background-size: 1200% 1200%, cover;

    -webkit-animation: HeaderGradient 240s ease infinite;
    -moz-animation: HeaderGradient 240s ease infinite;
    -o-animation: HeaderGradient 240s ease infinite;
    animation: HeaderGradient 240s ease infinite;

    background-blend-mode: multiply;
}
@-webkit-keyframes HeaderGradient {
    0%{background-position:50% 0%, 50% 50%}
    50%{background-position:50% 100%, 50% 50%}
    100%{background-position:50% 0%, 50% 50%}
}
@-moz-keyframes HeaderGradient {
    0%{background-position:50% 0%, 50% 50%}
    50%{background-position:50% 100%, 50% 50%}
    100%{background-position:50% 0%, 50% 50%}
}
@-o-keyframes HeaderGradient {
    0%{background-position:50% 0%, 50% 50%}
    50%{background-position:50% 100%, 50% 50%}
    100%{background-position:50% 0%, 50% 50%}
}
@keyframes HeaderGradient {
    0%{background-position:50% 0%, 50% 50%; }
    50%{background-position:50% 100%, 50% 50%; }
    100%{background-position:50% 0%, 50% 50%; }
}

这是一个有效的CodePen：

https://codepen.io/AES/pen/Wjpqqz

它在Chrome中运行正常，但在Firefox中滚动时，滚动时背景图像会移动。检查笔并滚动页面一点。向下滚动时图像会上升。

有任何线索该做什么？

滚动背景图片封面

0 个答案: