Question

我正试图淡化大背景图片。我试过这个：

#cover {
    background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg)         no-repeat center center fixed;
    background-size: cover;
    height:100%;
    width: 100%;
    position:fixed;
    opacity:0;
    transition: opacity 2s;
}

然而，图像永远不会出现。我做错了什么？

詹姆斯

Answer 1

您实际上需要一个不透明度的动画，您可以在其中设置animation-fill-mode: forwards，以便在动画的最后一次迭代后继续应用最后一帧。

更新小提琴：http://jsfiddle.net/NVk2N/7/

#cover {
    ...
    -webkit-animation: 2s show;
    -moz-animation: 2s show;
    -ms-animation: 2s show;
    animation: 2s show;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

}


@-webkit-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-moz-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-ms-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}

（当然，您需要在必要时使用供应商前缀）

注意：如果您只需要淡入背景图片（而不是整个元素），您可以在绝对定位的伪元素中加载背景（例如{ {1}}）使用负#cover:before并将动画应用于psuedoelement本身：

以下是codepen的示例：http://codepen.io/anon/pen/EJayr/

相关CSS

z-index

关于伪元素的动画在每个现代浏览器上运行良好（Chrome＆lt; 26 - as reported on issue #54699除外 - 但不是真正的问题，因为此时的当前版本是34.0.1847.116）

Answer 2

我相信您可以使用keyframes and animations来完成工作。纯粹的css不可能仅淡化背景图像。参考：How to fade in background image by CSS3 Animation

答案解释说你可以在<img>内使用<div>来应用淡入淡出动画，因为除了css之外没有别的办法。

Answer 3

你需要使用一些js代码来触发动画属性。只需为#cover添加一个具有不透明度的新类：1并在body load上指定此类来覆盖。

example

<body onload="document.getElementById('cover').classList.add('showed');">

Answer 4

要触发过渡，您实际上需要一个触发器。

您正在设置＆＃34; 0＆＃34;的不透明度这就是你得到的：0不透明度。如果不透明度的声明从0变为1，则过渡将起作用。这就是过渡所做的。

Fabrizio Calderan与动画的解决方案应该可以胜任。

Answer 5

使用已经给出的其他答案会让您淡化该元素中的所有元素，这样就无法达到您想要的效果。

最好的方法是：

1）创建一个z-index为1的div，它保存您的背景图像以及您想要淡化的内容 2）创建另一个z-index为10的div，它保存你不想淡化的内容，并将它放在位置绝对的背景div上。 3）使用jquery animate

为背景图像设置动画

我希望这会有所帮助，这会给你理想的结果！

使用css3淡入淡出图像

5 个答案: