在 AJAX 加载图标下方添加文本

Question

我正在使用 jQuery 来显示 http://ajaxload.info/ 图标。

$(".modal").show();

<div class="modal"></div>

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}

我想在图标下方添加一些文字。我尝试在 class="modal" div 中添加新的 div，但它不起作用，因为我需要在背景上添加文本。 我怎样才能在背景图片下方有文字？

Answer 1

如果是我，我不会使用background 图像。我会这样做：

<style>
.modal {
    position: fixed;
    text-align:center;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255,255,255, .8 ) 
}
.modal::before {
    margin: auto;
    display:block ;
    text-align: center;
    content: url('http://i.stack.imgur.com/FhHRx.gif');
}
</style>
<div class="modal"><p>Content loading</p></div>

这是一个工作小提琴：https://jsfiddle.net/hsyprw2m/2/