Html 设置加载图标的位置

我试图在加载图像时设置一个图标。我的问题是，我不知道如何设置图标的位置。如果看到该示例，图标将显示在alt属性上

演示：

一种方法是在img上设置padding top

如果你喜欢，你也可以添加一些负的上边距来抵消上边距

.industry_img {
    background-image: url("http://www.maravilhalivros.com.br/skin/frontend/mtherla/default/images/loader.gif");
    background-position: center center;
    border: none;
    background-repeat: no-repeat;
    padding-top:60px; /* added */
    margin-top: -25px; /* added */
}

---

你不可能通过添加文本缩进来改变alt，但我认为这不是你想要的。不过你可以这样做

<div class="load" style="width:200px;height:200px">
    <img src="large.jpg" alt="alternate text" />
</div>

.load{background:url('http://www.maravilhalivros.com.br/skin/frontend/mtherla/default/images/loader.gif') no-repeat center;}

---

这只是一个说明问题的例子。我已经定义了scr如果您定义了src，那么您不应该看到alt文本在这种情况下，我看不到您描述的问题发生在加载图像之前，我看到了alt attr，其中图标也必须可见。问题只是视觉上的。我想要图标在alt的下面或后面。对不起，我不明白你说的“空闲”是什么意思。这个问题很容易理解。只需一个预加载图标，不覆盖alt文本。通过添加顶部填充，alt文本将显示在图标下方

<div class="load" style="width:200px;height:200px">
    <img src="large.jpg" alt="alternate text" />
</div>

.load{background:url('http://www.maravilhalivros.com.br/skin/frontend/mtherla/default/images/loader.gif') no-repeat center;}