Webkit 的背景

【问题标题】：Background with WebkitWebkit 的背景
【发布时间】：2011-08-10 00:48:31
【问题描述】：

能够将 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;
} }

谢谢！

【问题讨论】：

我不确定您是否可以使用 CSS 以及 WebKit 动画来做到这一点。 CSS 无法将背景图像操作到那种程度，所以我认为您需要一个替代解决方案。
您好 Blender，感谢您的快速响应。我看不出你不能用 webkit 做到这一点的原因。你有任何替代解决方案吗？谢谢！
Webkit 动画使用 CSS 属性，而 CSS 不做这类事情。我现在就写一篇……

标签： html css dom animation webkit

【解决方案1】：

我会拼凑一个伪背景：

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

它像普通背景一样工作，但不平铺。如果您需要平铺，请使用 background 属性创建 <div> 并使用它。

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/

【讨论】：