Question

我有css在页面上显示加载图标，如下所示

#loading {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: 'icon.gif';
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1000;
    }

如何在加载图标上方添加文字，例如“加载文字” 我试过了

#loading:after{
content: "loading text";
}

但它会在页面左上方显示文字。

Answer 1

尝试：

#loading:after{
  content: "Loading text";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Answer 2

您可以尝试使用#loading:after上的绝对位置。然后，您可以轻松地根据#loading父级位置

定位伪元素

Answer 3

设置position: relative;父级后，请尝试以下操作：

#loading:after {
    content: "loading text";
    position: absolute;
    bottom: 100%;
}

Answer 4

<div id="loading">
  <div class="loadingImage" >
    <img src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif"  alt="">
  </div>
</div>


#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    background : #fff;
}

.loadingImage {
    position:relative;
    top : 50%;
    left : 50%;
    margin-left : -50px;
    margin-top : -50px;
}

.loadingImage img {
  width : 100px
}

.loadingImage:after{
content: "loading text";
  position:absolute;
  top:-30px;
  left : 0
}

如何添加文本到加载图标CSS

4 个答案: