我试图仅通过使用div将加载屏幕放置到我的VueJs应用程序中,问题是我无法使divs(loadingScreen)背景色覆盖整个屏幕。相反,它覆盖了装载机的高度。我已经尝试过增加利润,但这并不能解决问题。
#ctrl {
position: absolute;
display: block;
text-align: center;
left: 50%;
top: 40%;
}
#loadingScreen {
background-color: rgb(0, 0, 0);
display: block;
z-index: 1;
position: absolute;
}
#loader {
position: relative;
left: -50%;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: inherit;
}
#playPause{
display:none;
}
<div id="ctrl">
<div id="playPause">
<img src="../public/pauseButton.png" />
<img src="../public/playButton.png" />
</div>
<div id="loadingScreen">
<div id="loader"></div>
</div>
</div>
答案 0 :(得分:3)
由于加载屏幕是ctrl
元素的子级,因此可以预期会感觉到行为。这不是问题,我只是将加载屏幕的位置更改为固定并操纵了其位置属性,请参见下文。然后我只是将装载机居中。
#ctrl {
position: absolute;
display: block;
text-align: center;
left: 50%;
top: 40%;
}
#loadingScreen {
background-color: rgb(0, 0, 0);
display: block;
z-index: 1;
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
}
#loader {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left:auto;
margin-right:auto;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 5;
}
#playPause{
display:none;
}
<div id="ctrl">
<div id="playPause">
content
</div>
<div id="loadingScreen">
<div id="loader"></div>
</div>
</div>