Css 如何使此加载覆盖效果响应？ 我试图用中间旋转图标做加载叠加效果。我用。 因此我将其编码为：

它是有效的，但我正在努力让它反应灵敏。我的意思是，当截面尺寸减小时，自旋尺寸也会减小（保持居中）。A如果截面尺寸增大，则会形成oposite

我尝试使用

em

单位，但没有得到预期的结果

这是最好的方法吗？我怎样才能使它响应

CSS

section {
    width: 200px;
    height: 200px;
    margin: 50px;
}
#overlay {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 99999999999;
    background: rgba(0, 0, 0, 0.5);
}
#overlay i {
    position: absolute;
    top: 50%;
    left: 50%;
}
.spin-big {
    font-size: 50px;
    height: 50px;
    width: 50px;
    margin-top: -25px;
    margin-left: -25px;
}
.spin-normal {
    font-size: 35px;
    height: 35px;
    width: 35px;
    margin-top: -22.5px;
    margin-left: -22.5px;
}
.spin-small {
    font-size: 20px;
    height: 20px;
    width: 20px;
    margin-top: -10px;
    margin-left: -10px;
}

HTML

<section>
    <div id="overlay"> 
        <i class="fa fa-spinner fa-spin spin-big"></i>
    </div>
</section>

<section>
    <div id="overlay"> 
        <i class="fa fa-spinner fa-spin spin-normal"></i>
    </div>
</section>

<section>
    <div id="overlay"> 
        <i class="fa fa-spinner fa-spin spin-small"></i>
    </div>
</section>

---

任何提示、建议或帮助都将不胜感激，如果您需要更多信息，请告诉我，我将编辑帖子。

为什么您不尝试将

display:table

属性用于覆盖div，将

display:table cell

用于

I

类？详情如下:

#overlay {
    width: 100%;
    height: 100%;
    display:table;
    background: rgba(0, 0, 0, 0.5);
}
#overlay i {
   display:table-cell;
    vertical-align:middle;
    text-align:center;
}

---

工作

为什么不尝试将

display:table

属性用于覆盖div，并将

display:table cell

用于

i

类？详情如下:

#overlay {
    width: 100%;
    height: 100%;
    display:table;
    background: rgba(0, 0, 0, 0.5);
}
#overlay i {
   display:table-cell;
    vertical-align:middle;
    text-align:center;
}

---

工作

遇到这种情况，寻找类似的解决方案

只有通过媒体查询才能响应地更改字体大小

即：

---

ext..

只是遇到这个问题，寻找类似的解决方案

只有通过媒体查询才能响应地更改字体大小

即：

---

ext..

您可以使用此选项以获得良好效果

.loading 
{
 pointer-events: all;
 z-index: 99999;
 border: none;
 margin: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 cursor: wait;
 position: fixed;
 background-color: rgba(0, 0, 0, 0.6);
}

---

你可以用这个来获得好的效果

.loading 
{
 pointer-events: all;
 z-index: 99999;
 border: none;
 margin: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 cursor: wait;
 position: fixed;
 background-color: rgba(0, 0, 0, 0.6);
}

------------布局页面中的div---------------
----------css-----------
.加载bg{
背景：#e9e9e9；
显示：无；
身高：100%；
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
不透明度：0.5；
z指数：5000；
宽度：100%；
}
.正在加载bg img{
位置：绝对位置；
最高：42%；
左：46%；
高度：100px；
宽度：100px；
}
-------------html------------
@Html.TextBoxFor（model=>model.PrimaryEmail，新{@class=“formcontrol enter email FPHidden div”，id=“email address entered”，name=“email address entered”}）
@Html.ValidationMessageFor（model=>model.PrimaryEmail）
@ASRP.Resources.Resource.Submit
--------------剧本--------------------------
函数submitbuttonFPHidden（）{
var username=$（“#输入的电子邮件地址”）.val（）；
如果（用户名==null | |用户名==“”）{
document.getElementById（“输入的电子邮件地址”）.style.borderColor=“#ff0232”；
返回false；
}
如果（！validateEmail（用户名））{
document.getElementById（“输入的电子邮件地址”）.style.borderColor=“#ff0232”；
返回false；
}
document.getElementById（'dvSpinner'）.style.display=“block”；
$.ajax({
url:“../User/ForgotPassword”，
数据：{电子邮件：用户名}，
数据类型：“json”，
类型：“post”，
错误：函数（错误，消息）{
$（'div#dvSpinner'）.hide（）；
返回false；
},
成功：功能（数据）{
if（data.success）{
如果（data.emailSent==“成功”）{
document.getElementById（'FPHiddenDivContainer'）.style.display=“无”；
document.getElementById（'entered-email-address'）.style.display=“block”；
document.getElementById（'entered-email-address-para'）。innerHTML=document.getElementById（'email-address-entered'）。值；
document.getElementById（'PwdMsgNew'）.style.display=“无”；
}
else if（data.emailSent==“失败”）
{
document.getElementById（'FPHiddenDivContainer'）.style.display=“无”；
document.getElementById（'entered-email-address'）.style.display=“block”；
document.getElementById（'entered-email-address-para'）。innerHTML=document.getElementById（'email-address-entered'）。值；
document.getElementById（'PwdMsg'）.style.display=“无”；
document.getElementById（'lblthankyu'）.style.display=“无”；
}
}
否则{
var ddlLangValue=$（'#ddlLangs'）.val（）；
setCookie（“文化”，价值观，31536e3）；
var resources={}；//全局变量。
（函数（$）{
$.getJSON（“资源/GetResources”，函数（数据）{
资源=数据；
警报（resources.fpUnabletoProcessReq）；
});
})（jQuery）；
}
document.getElementById（'dvSpinner'）.style.display=“无”；
}
});
返回true；
}

------------布局页面中的div---------------
----------css-----------
.加载bg{
背景：#e9e9e9；
显示：无；
身高：100%；
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
不透明度：0.5；
z指数：5000；
宽度：100%；
}
.正在加载bg img{
位置：绝对位置；
最高：42%；
左：46%；
高度：100px；
宽度：100px；
}
-------------html------------
@Html.TextBoxFor（model=>model.PrimaryEmail，新{@class=“formcontrol enter email FPHidden div”，id=“email address entered”，name=“email address entered”}）
@Html.ValidationMessageFor（model=>model.PrimaryEmail）
@ASRP.Resources.Resource.Submit
--------------剧本--------------------------
函数submitbuttonFPHidden（）{
var username=$（“#输入的电子邮件地址”）.val（）；
如果（用户名==null | |用户名==“”）{
document.getElementById（“输入的电子邮件地址”）.style.borderColor=“#ff0232”；
返回false；