移动条纹使用背景图像，但不与背景渐变

Question

我的代码与background-image完美配合，但我想删除图像并使用相同的确切代码，并在使用渐变（使用background）而不是图像时保持相同的功能。< / p>

这是我的代码（摘录）：

.gangina {
  /*background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);*/
  background-image: url("http://s1.directupload.net/images/130503/xo29uiim.png");
  background-position: 0 0;
  border: 1px solid #ccc;
  display: block;
  height: 30px;
  width: 150px;
}
.hezi {
  -moz-animation: hezi 4s infinite linear;
  -ms-animation: hezi 4s infinite linear;
  -o-animation: hezi 4s infinite linear;
  -webkit-animation: hezi 4s infinite linear;
  animation: hezi 4s infinite linear;
}
@keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-moz-keyframes hezi {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-webkit-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-ms-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@-o-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

<div class="gangina hezi"></div>

但我不想依赖图像，因此我想删除背景图像并使用如下代码中的渐变：

background:repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);

此处需要进行小的调整，以使动画与background属性和渐变一起使用。

Answer 1

重复线性渐变通常需要设置background-size属性才能使动画正常工作。

对于这种情况，您可以设置background-size: 28px 100%;并且动画可以正常工作（请参阅下面的代码段）。

.gangina {
  background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
  background: -moz-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);  
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
  background-position: 0 0;
  background-size: 28px 100%;
  border: 1px solid #ccc;
  display: block;
  height: 30px;
  width: 150px;
}
.hezi {
  -moz-animation: hezi 0.8s infinite linear;
  -ms-animation: hezi 0.8s infinite linear;
  -o-animation: hezi 0.8s infinite linear;
  -webkit-animation: hezi 0.8s infinite linear;
  animation: hezi 0.8s infinite linear;
}
@keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-moz-keyframes hezi {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-webkit-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-ms-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}
@-o-keyframes "hezi" {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -28px 0;
  }
}

<div class="gangina hezi"></div>