无论如何要编写更多后台代码吗？

发布于 2025-01-05 19:48:08 字数 2445 浏览 0 评论 0原文

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

背景图像：url（../images/bloobg.png），-moz-线性梯度（底部，#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;
}

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

原文

I have a webkit gradient background and a repeat picture on the same line of code in background-image. like

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

Wondering if i can add one more code or anything that will make the bloobg.png keep scrolling left. I tried to use jQuery and Java but i dont think im ready yet :[

-edit- i have supported the other browsers

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

also the website is www.bloomooyogurt.com

-edit- I tried this out but didn't work can you see if there is a syntax error? For some reason the @-webkit-keyframes move { is in gray...

In the CSS file, I put

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

then i put

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

The only thing that changed was the gradient. It's just one color now.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

救赎№ 2025-01-12 19:48:08

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

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

Use CSS animations to animate the background-position property. Here is an example (you will have to use browser prefixes):

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

回复收藏 0 原文

执笔绘流年 2025-01-12 19:48:08

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

<代码>正文
{
背景：-moz-线性渐变（顶部，#9bd5eb，#01aef0）；
背景：-webkit-gradient（线性，左上，左下，颜色停止（0，#9bd5eb），颜色停止（1，#01aef0））；
背景：线性渐变（#9bd5eb，#01aef0）；
-饼图背景：线性渐变（#9bd5eb，#01aef0）；
}