2
我有一个背景,既有背景图像,这是一个透明PNG和线性渐变的div。预期的效果是在梯度保持静止的同时让图像变成动画。在Chrome和Safari中,这是动画的工作原理,但在Firefox和IE中,背景图像和渐变动画一起。CSS3动画渐变+ bg图像
有没有一种方法可以在不使用其他div的情况下使用CSS在所有浏览器中获得所需效果?
@-webkit-keyframes bgscroll {
0% { background-position: 0 0 ; }
100% { background-position: 0 -230px; }
}
@keyframes bgscroll {
0% { background-position: 0 0 ; }
100% { background-position: 0 -230px; }
}
.hero {
display: block;
height: 20rem;
background-image: image-url("icons_grid.png"), -webkit-linear-gradient(to bottom, #646464, #323232);
background-image: image-url("icons_grid.png"), -moz-linear-gradient(to bottom, #646464, #323232);
background-image: image-url("icons_grid.png"), linear-gradient(to bottom, #646464, #323232);
margin-bottom: 3rem;
animation: bgscroll 30s infinite linear;
-webkit-animation: bgscroll 30s infinite linear;
border-bottom: .3rem solid #0b71b9;
}
+1伟大的答案。工作正常。 –
很高兴,我可以帮助:) – skshoyeb
是在我的最终确认。非常感谢,它现在可以在所有浏览器中运行。 – LLong