无论如何编码的背景代码更多？

我有一个webkit渐变背景和背景图像中的同一行代码重复图片。像无论如何编码的背景代码更多？

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

想知道如果我可以添加更多的代码或任何东西，这将使bloobg.png一直滚动左右。我试图用jQuery和Java，但我不认为我已经准备好尚未：

CNC中我都支持其他浏览器

#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

CNC中我试着这出来，但没有奏效，你可以看看是否有语法错误？出于某种原因，@-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; 
}

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

来源

2012-02-14 nuk11888

“保持向左滚动”？你的意思是“背景位置：固定的”，“？ – 2012-02-14 22:37:49

会使我的图片继续向左循环吗？并关闭屏幕？ – nuk11888 2012-02-14 22:39:16

对于视口，图片不会移动。你想获得动画背景吗？ – 2012-02-14 22:40:27

使用CSS动画为background-position属性设置动画效果。这里是一个例子（你将不得不使用浏览器前缀）：

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

来源

2012-02-14 22:47:53 joshnh

会在我的#body {..}之下进行吗？我必须在某处定义.foo吗？ – nuk11888 2012-02-15 14:14:25

我不认为我的@keyframes正在使用joomla extplorer插件工作，它显示为灰色：C – nuk11888 2012-02-15 15:32:56

.foo只是一个虚构的名称，将这些样式应用于所需的元素。请记住，您必须添加浏览器前缀（-webkit-，-moz-，-ms-和-o-）。 – joshnh 2012-02-16 06:21:02

您的梯度现在只能在一个浏览器中使用。

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

来源

2012-02-14 22:49:09 thepriebe

这不是一个更好的评论，因为它不是真的回答这个问题吗？ – joshnh 2012-02-14 23:03:13

我支持在原始问题编辑的其他浏览器 – nuk11888 2012-02-15 14:12:32

无论如何编码的背景代码更多？

回答

相关问题