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;
}

我想在图标下方添加一些文字。我试过在课堂上设置新的div =＆＃34; modal＆＃34; 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/

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

1 个答案: