小编LLo*_*ong的帖子

我有一个背景的div,背景图像是透明的png和线性渐变.期望的效果是在渐变保持静止的同时使图像具有动画效果.在Chrome和Safari中,这就是动画的工作方式,但在Firefox和IE中,背景图像和渐变一起动画.

有没有办法在不添加其他div的情况下使用CSS在所有浏览器中获得所需效果？

http://jsfiddle.net/FprGA/

    @-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;
  }