我有一个webkit渐变背景和背景图像中同一行代码上的重复图片。像
background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #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;
}
该网站也是www.bloooyogurt.com
-编辑-我试过了,但没有成功,你能看看是否有语法错误吗?由于某种原因,@-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;
}
唯一改变的是坡度。现在只是一种颜色。
使用CSS动画设置背景位置属性的动画。以下是一个示例(您必须使用浏览器前缀):
@keyframes bgMove {
0% { background-position: 0 0, 0 0; }
100% { background-position: 100% 0, 0 0; }
}
.foo {
animation: bgMove 5s infinite;
}
您的渐变目前只能在一个浏览器中工作。
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);
}