CSS:如何在 div 顶部获取动画 gif 背景图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3204107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:21:27  来源:igfitidea点击:

CSS: How to get an animated gif background-image on top of a div

css

提问by NullVoxPopuli

I'm trying to make a loading overlay thing. Currently, I have some javascript adding and removing the class that makes everything 45% opaque, and adds the mac-like spinner for waiting until (sorting for example) complete.

我正在尝试制作一个加载覆盖的东西。目前,我有一些 javascript 添加和删除使所有内容变得 45% 不透明的类,并添加类似 mac 的微调器以等待(例如排序)完成。

Now, the current way,

现在,现在的方式,

.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;
}

puts the image on top, but the gif doesn't animate. Without the background-attachment: fixed, it animates, but text can be on top of the loading gif.

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

ideas?

想法?

回答by Tomas Aschan

Is it not an option to do this with an imgtag?

使用img标签执行此操作不是一种选择吗?

HTML:

HTML:

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

CSS:

CSS:

#overlay img { display: none; }

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


Updated css.

更新了 css。

回答by Puaka

hmm.. maybe you can try absolute positioning instead, something like this :

嗯..也许你可以试试绝对定位,像这样:

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;}