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
CSS: How to get an animated gif background-image on top of a div
提问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 img
tag?
使用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"> </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;}