CSS 使页面变暗并显示加载指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7046484/
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
Dim the page and show a loading indicator
提问by Dejan.S
I would like to dim the page and show a loading indicator. I got the jQuery set. It's the CSS that I can't get to work. It's the diming the background that I can't do. Any ideas?
我想使页面变暗并显示加载指示器。我得到了 jQuery 集。这是我无法开始工作的 CSS。这是我不能做的背景变暗。有任何想法吗？
This is what I got (shows the indicator in the center of the page):
这就是我得到的（在页面中央显示指示器）：
#Loading
{
display: none;
position: fixed;
z-index: 1000;
height: 31px;
width: 60px;
left: 50%;
top: 35%;
background-image: url('../Images/ajax-loader-bright.gif');
background-repeat: no-repeat;
}
回答by Litek
Since you've tagged your question as CSS 3:
由于您已将问题标记为 CSS 3：
background: rgba(0,0,0,.5) url('../Images/ajax-loader-bright.gif') no-repeat;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999;
You can adjust the dimming level by changing alpha (.5) in the line containing rgba.
您可以通过更改.5包含rgba.
回答by risnandar
to create dim page using jquery with/without image can also be done with this plugin http://jquery.malsup.com/block/#demos
也可以使用此插件http://jquery.malsup.com/block/#demos使用带有/不带图像的 jquery 创建昏暗页面
to generate ajax loading page there is http://www.ajaxload.info/which is awesome.
生成 ajax 加载页面有http://www.ajaxload.info/这是真棒。
回答by Justin Lucas
You could use a separate div positioned absolutely with width and height set to 100%. Then set the background of this div to #000 (black) and its opacity to 50% (or whatever level of dimness you want).
您可以使用单独的 div 绝对定位，宽度和高度设置为 100%。然后将此 div 的背景设置为 #000（黑色），并将其不透明度设置为 50%（或您想要的任何亮度级别）。
<div id='dim_wrapper' style='width:100%; height:100%; background:#000; z-index:10'> </div>
<script>
$("#dim_wrapper").animate({
'opacity':0.5
});
</script>
