CSS 动画在图像后面连续播放。当图像未加载时，它将显示，但当加载时，图像将与动画重叠。我正在使用 z-index 来实现此目的，但它不起作用。
图像应使用 z-index 属性隐藏加载动画。
Note:我无法使用任何 JavaScript 解决方案来隐藏加载动画并在图像加载后显示它。
CSS / HTML / 演示
.leftprev {
overflow:auto;
position:absolute;
height:99%;
width:85%;
}
.loadingslide {
z-index: 50; /* Loading div's z-index */
}
.spinner.big {
display: block;
height: 40px;
}
.spinner {
bottom: 0;
display: none;
font-size: 10px;
height: 30px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
}
.spinner.big > div {
width: 6px;
}
.spinner > div {
animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
background-color: #333;
display: inline-block;
height: 100%;
width: 6px;
}
a {
color: #470a09;
text-decoration: none;
}
.slideshow .slidebro .leftprev #slideshowpic {
display: block;
margin: 0 auto;
width: auto;
z-index: 100; /* image's z-index */
}
<div class="leftprev">
<div class="loadingslide"> <!-- Loading Animation div (should be running in background of the image) -->
<div id="tracking" class="spinner big">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<a id="targetslide" target="_blank" title="Click to view fit to screen" href="">
<img src="http://www.placehold.it/500" alt="" id="slideshowpic" /> <!-- The image (should mask the loading animation div) -->
</a>
</div>
你必须添加position到您想要应用的元素z-index.
来自 CSS 技巧：
CSS 中的 z-index 属性控制垂直堆叠顺序
重叠的元素。比如，哪一个看起来像是物理上的
离你更近。 z-index 仅影响具有位置的元素
静态值（默认值）以外的值。
http://css-tricks.com/almanac/properties/z/z-index/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
