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没有动画效果。没有背景附件：固定，它会动画，但文本可以在加载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。

Answer 2

嗯..也许你可以试试绝对定位，比如这样：

HTML
<div class="mydiv">
    <div class="text">Currently Loading....</div>
    <div class="currently-loading">&nbsp;</div>
</div>

CSS
.currently-loading {
    opacity:0.45;
    -moz-opacity:0.45;
    filter:alpha(opacity=45);
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    position:absolute;
    height:48px;
    width:48px;
    z-index:10;
}
.text { display:block; width:200px; height:100px; position:absolute; font-weight:bold; z-index:20;}

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

2 个答案: