Html 不管怎么说，你还要编写更多的背景代码吗？

我有一个webkit渐变背景和背景图像中同一行代码上的重复图片。像

背景图像：url（../images/bloobg.png），-moz线性渐变（底部，#9bd5eb，#01aef0）；/*FF3.6+/

不知道我是否可以再添加一个代码或任何东西，使bloobg.png保持向左滚动。我尝试使用jQuery和Java，但我认为我还没有准备好：[

-编辑-我支持其他浏览器

#body { background:#9bd5eb;
background-image: url(../images/bloobg.png); /* fallback */
background-image:url(../images/bloobg.png),-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(../images/bloobg.png),-webkit-linear-gradient(bottom, #9bd5eb, #01aef0); /* Chrome 10+, Saf5.1+ */
background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0); /* FF3.6+ */
background-image: url(../images/bloobg.png), -ms-linear-gradient(bottom, #9bd5eb, #01aef0); /* IE10 */
background-image: url(../images/bloobg.png),  -o-linear-gradient(bottom, #9bd5eb, #01aef0); /* Opera 11.10+ */
background-image:  url(../images/bloobg.png), linear-gradient(bottom, #9bd5eb, #01aef0); /* W3C */
background-attachment:fixed;
}

此外，该网站是

-编辑-我尝试了这个方法，但没有成功。你能看到是否有语法错误吗？出于某种原因，

@-webkit关键帧移动{

是灰色的

在CSS文件中，我将

@-webkit-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }
@-moz-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }

然后我把

#body { background:#9bd5eb; 
background-image: url(../images/bloobg.png); /* fallback */
background-image:url(../images/bloobg.png),-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(../images/bloobg.png),-webkit-linear-gradient(bottom, #9bd5eb, #01aef0), -webkit-animation: move 10s infinite; /* Chrome 10+, Saf5.1+ */
background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0), -moz-animation: move 10s infinite; /* FF3.6+ */
background-image: url(../images/bloobg.png), -ms-linear-gradient(bottom, #9bd5eb, #01aef0); /* IE10 */
background-image: url(../images/bloobg.png),  -o-linear-gradient(bottom, #9bd5eb, #01aef0); /* Opera 11.10+ */
background-image:  url(../images/bloobg.png), linear-gradient(bottom, #9bd5eb, #01aef0); /* W3C */
background-attachment:fixed;
}

---

唯一改变的是渐变。现在只有一种颜色。

使用CSS动画来设置背景位置属性的动画。下面是一个示例（您必须使用浏览器前缀）：

---

渐变当前仅在一个浏览器中可用

正文
{
背景：-莫兹线性梯度（顶部，9bd5eb，01aef0）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#9bd5eb）、颜色停止（1，#01aef0））；
背景：线性梯度（#9bd5eb，#01aef0）；
-饼图背景：线性梯度（#9bd5eb，#01aef0）；
}

“保持向左滚动”？你的意思是背景位置：固定；？这会使我的图片继续向左循环吗？并离开屏幕吗？图片相对于视口不会移动。你想获得动画背景吗？我有背景附件：固定；我相信它会阻止渐变顶部的图像与co一起滚动但我想让它向左移动，编辑Perciecly你可以使用

背景位置

CSS属性定期移动背景。必须支持哪些浏览器？作为注释不是更好吗，因为这不是问题的答案？这会在我的#body{..}下面吗？我必须在某个地方定义.foo吗？我不认为我的@keyframes在使用joomla extplorer插件时起作用，它显示为灰色：C.foo只是一个伪造的名称，将这些样式应用于所需的元素。请记住，您必须添加浏览器前缀（-webkit-，-moz-，-ms-，和-o-）.所以我只添加了动画：bgMove 5s infinite；在背景图像下面的#body{..}内：url…？和do@-webkit关键帧bgMove{..}，然后其他浏览器前缀？

@keyframes bgMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 100% 0, 0 0; }
}
.foo {
    animation: bgMove 5s infinite;
}