Question

在这里输入代码

大家好，我想做一个平滑的过渡，用0.4 5s，从bg none到bg图像，应该有办法...

我尝试以下方法：

`


>.content {  /*class in div id topcontent */
>>position: relative;

>>padding-top: 1150px;

>>width: 900px;
>>margin: 0px auto 0px auto;

>>z-index:1;

>>-webkit-transition: all 0.9s ease;  
>>transition: all 0.9s ease;

>}

>.gobg { /* the bg class */
>>background: url(../images/gradientwhitelow.png) center repeat-y;

>>-webkit-transition: all 0.9s ease;  

>>transition: all 0.9s ease;

>}

and js


><script>
>>if ($(window).scrollTop() > 690){
        $("#topcontent").toggleClass( "gobg", true );
>>}</script>

`

任何提示？

谢谢！

我纠正了js，worng代码

Answer 1

background-image属性不可动画：http://www.w3.org/TR/css3-background/#the-background-image

根据规格，颜色可动画。因此，您可能需要尝试两个div：一个具有您的背景图像，另一个具有动画，从background-color: somecolor到background-color: transparent。

Answer 2

查看此动画属性表...

http://oli.jp/2010/css-animatable-properties/#background-image

你会注意到背景图像有那么小的下标2.查看底部的那个部分你会看到：

“虽然CSS背景和边框模块3级编辑的草案说明了 “动画：否”为写作时的背景图像，支持用于交叉淡化图像的CSS出现在Chrome 19 Canary中。直到广泛的支持到达这可以通过图像精灵伪造背景位置或不透明度。要为渐变设置动画，它们必须是相同的类型。“

背景转换不工作，没有img，css

2 个答案: