CSS:如何在div上获得动画gif背景图像

Question

我正在尝试制作加载重叠的东西.目前,我有一些javascript添加和删除使所有45%不透明的类,并添加类似mac的微调器等待直到(例如排序)完成.

现在,目前的方式,

.currently-loading {
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
width: 950px;
background-attachment: fixed;
background-image: url(../images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}

将图像放在顶部,但gif没有动画.如果没有background-attachment:fixed,它会动画,但是文本可以在加载的gif之上.

想法？

Answer 1

用img标签做这个不是一个选择吗？

HTML:

<div id="overlay"><img src="loading.gif" alt="Be patient..." /></div>

CSS:

#overlay img { display: none; }

#overlay.currently-loading img { 
    display: block; 
    width: 100%;
    heigth: 100%;
}

更新了css.