Html 创建透明加载覆盖
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20741274/
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
Creating a transparent loading overlay
提问by Prometheus
Using the same markup (shown below), is it possible to add a style which creates a transparent background overlay i.e. a loading overlay? When I try to add a background to .loadingCSS it only adds it to the background of the .loadingelement and not the body. The style .loadinggets removed (via jQuery) so ideally I want the overlay to be somehow be connected to .loading, if possible?
使用相同的标记（如下所示），是否可以添加一种样式来创建透明背景覆盖，即加载覆盖？当我尝试向.loadingCSS添加背景时，它只会将其添加到.loading元素的背景而不是正文。样式.loading被删除（通过 jQuery）所以理想情况下我希望覆盖以某种方式连接到.loading，如果可能的话？
HTML
HTML
<div class=loading style-2>
content
</div>
CSS
CSS
.loading {
position: fixed;
top: 1px;
margin: 5em;
border-width: 30px;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
.style-1 {
border-style: solid;
border-color: #444 transparent;
}
.style-2 {
border-style: double;
border-color: #ccc transparent;
}
.style-3 {
border-style: double;
border-color: #444 #fff #fff;
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(359deg); }
}
@-o-keyframes spin {
100% { -moz-transform: rotate(359deg); }
}
@keyframes spin {
100% { transform: rotate(359deg); }
}
采纳答案by ???
回答by LeBen
I was able to do a loading overlay but only with the addition of an extra container.
我能够进行加载覆盖，但只能添加一个额外的容器。
<div class="loading style-2"><div class="loading-wheel"></div></div>
回答by abduljpwd
there is a few ways to create this effect, the easiest would be using .loading{ position:fixed; z-index:3; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5);} check this article for other options
有几种方法可以创建这种效果，最简单的方法是使用 .loading{ position:fixed; z-index:3; 顶部：0; 左：0; 宽度：100%；高度：100%；背景：rgba(255,255,255,0.5);} 查看这篇文章以了解其他选项
