带有 Webkit 的背景

发布于 2024-11-02 22:10:13 字数 481 浏览 1 评论 0原文

能够将 webkit 动画应用于整个背景图像（而不是内容）的正确代码是什么？

例如：

body {
    background-color: #FFF;
    background-image: url(bgsuper.jpg);
    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

谢谢！

原文

What is the correct code to be able to apply a webkit animation to the entire background image (not the content)?

EX:

body {
    background-color: #FFF;
    background-image: url(bgsuper.jpg);
    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

Thanks!

分享到QQ

分享到微博

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

发布评论

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

著墨染雨君画夕 2024-11-09 22:10:13

我会拼凑出一个伪背景：

<img id="pseudo-background" src="..." alt="You need me" />

它的工作原理与普通背景类似，但不会平铺。如果您需要平铺，请创建一个带有 background 属性的

并使用它。

HTML：

<img src="..." id="pseudo-background" alt="foo" />

I work, see!

CSS：

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

#pseudo-background {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;

    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;

}

还有，演示：http:// /jsfiddle.net/4z6TS/3/

I'd hack together a pseudo-background:

<img id="pseudo-background" src="..." alt="You need me" />

It works like a normal background, but doesn't tile. If you need tiling, make a <div> with a background property and work with that.

HTML:

<img src="..." id="pseudo-background" alt="foo" />

I work, see!

CSS:

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

#pseudo-background {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;

    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;

}

And, a demo: http://jsfiddle.net/4z6TS/3/

回复收藏 0 原文

~没有更多了~