我在 background-image 中的同一行代码中有一个 webkit 渐变背景和一个重复图片。喜欢
背景图片:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0);/* FF3.6+ */
想知道我是否可以再添加一个代码或任何可以使 bloobg.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;
}
-edit- 我试过了但是没有用你能看看是否有语法错误吗?出于某种原因,@-webkit-keyframes 移动 {
呈灰色...
在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 动画为 background-position 属性设置动画。这是一个示例(您必须使用浏览器前缀):
@keyframes bgMove {
0% { background-position: 0 0, 0 0; }
100% { background-position: 100% 0, 0 0; }
}
.foo {
animation: bgMove 5s infinite;
}
关于html - 无论如何要编写更多的后台代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9285250/