无论如何要编写更多的后台代码？答案

【问题标题】：Anyway to code the background code even more?无论如何要编写更多的后台代码？
【发布时间】：2012-02-14 22:36:29
【问题描述】：

我在 background-image 的同一行代码中有一个 webkit 渐变背景和一个重复图片。喜欢

background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0); /* FF3.6+ */

想知道我是否可以再添加一个代码或任何使 blobg.png 继续向左滚动的内容。我尝试使用 jQuery 和 Java，但我认为我还没有准备好：[

-edit-我已经支持其他浏览器

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

网站也是www.bloomooyogurt.com

-edit- 我试过了，但没用，你能看看是否有语法错误吗？出于某种原因，@-webkit-keyframes move { 是灰色的...

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

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

【问题讨论】：

“继续向左滚动”？你的意思是background-position:fixed;？
这会让我的图片一直向左循环吗？并离开屏幕？
相对于视口，图片不会移动。您想获得动画背景吗？
我有背景附件：已修复；我相信这会阻止渐变顶部的图像随着内容滚动，但我喜欢让它向左移动，编辑perciecly
您可以使用background-position CSS 属性定期移动背景。必须支持哪些浏览器？

标签： html css background background-image

【解决方案1】：

使用 CSS 动画为 background-position 属性设置动画。这是一个示例（您必须使用浏览器前缀）：

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

【讨论】：

那会在我的#body{..} 下方吗？我必须在某处定义 .foo 吗？
我不认为我的@keyframes 正在使用 joomla extplorer 插件工作，它显示为灰色：C
.foo 只是一个假名，将这些样式应用于所需的元素。请记住，您必须添加浏览器前缀（-webkit-、-moz-、-ms- 和 -o-）。
所以我只添加动画：bgMove 5s 无限；在背景图像下方的#body{..} 内：url ...;？然后做@-webkit-keyframes bgMove {...} 其他浏览器前缀？

【解决方案2】：

您的渐变目前仅适用于一种浏览器。

body { background: -moz-linear-gradient(top, #9bd5eb, #01aef0); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9bd5eb),color-stop(1, #01aef0)); background: linear-gradient(#9bd5eb, #01aef0); -pie-background: linear-gradient(#9bd5eb, #01aef0); }

【讨论】：

这不是更好的评论吗，因为它不是问题的真正答案？