Question

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

演示：

<a class="thumbnail" href="www.google.pt">
<img class="industry_img" src="" title="xpto" alt="alt"/>
</a>
<hr>
<a class="thumbnail" href="www.google.pt">
<img class="industry_img" src="smiley.gif" title="xpto" alt="alt"/>
</a>

.industry_img {
    background-image: url("loader.gif");
    background-position: center center;
    background-repeat: no-repeat;
}

https://jsfiddle.net/3znz2ajg/

Answer 1

一种方法是在padding-top

上设置img

如果你愿意，你也可以添加一些负的上边距来对抗顶部填充。

.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 */
}

FIDDLE

Answer 2

你无法改变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;}

设置加载图标的位置

2 个答案:

FIDDLE