如何延迟div中背景图像的显示

Question

这是我的小提琴.

我只是希望background-image:css中的" "完全加载并在3秒后显示快速淡入效果,直到那时整个div必须是黑色.
怎么可能在css或javascript.

.initials {
    position:absolute;
    background:black;
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}

<div class="initials">A</div>

Answer 1

通过一些细微的变化,我可能只用CSS3就能达到你想要的效果.检查小提琴:http://jsfiddle.net/w11r4o3u/

CSS:

.initials {
    position:relative;
    background:black;
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}
.initials .text {
    position: relative;
}

@-webkit-keyframes test {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

.initials:before{
  content: "";
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation-name: test;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-out;  
}

HTML:

<div class="initials"><div class="text">A</div></div>

编辑:

现在动画在3秒后开始,需要0.3秒才能完成.这是小提琴:http://jsfiddle.net/w11r4o3u/1/

• 要调整fadeIn发生的"速度",请编辑 -webkit-animation-duration: .3s;

• 如果要调整动画"延迟"以启动,请编辑 -webkit-animation-delay: 3s;

Answer 2

也许这样......虽然淡入还很棘手--AFAIK你不能淡化背景图像属性

setTimeout(function(){
    $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")');
}, 3000)

另一个选择是将HTML分成3个部分,具有最高z-index的字母,然后是星形层上的黑色层...然后淡出黑色层