html img標記不適用於CSS Sprite背景

Question

我有以下帶有精靈背景的圖像：

HTML：

<li>
    <img class="imgicons icons22" align="absmiddle" src="">
    <a href="#"></a>
</li>

CSS：

.icons22 {
    display: inline-block;
    background-position: -114px -306px;
    background-repeat: no-repeat;
}
.imgicons {
    width: 16px;
    height: 16px;
    background: url('../images/main.png') repeat scroll 0% 0% transparent;
}

輸出為：

如何從圖像中刪除輪廓邊框？ 我已經在FF / Chrome中檢查了這一點。

Answer 1

嘗試將img標簽更改為div 。 您不能有一個空的圖像標簽，然后將圖像放入背景中……這不是它的工作原理。 圖像作為背景屬於Block元素。

http://jsfiddle.net/gK7dP/4/

（我增加了div的大小以容納較大的img ，但您明白了...）

Answer 2

空的src並不意味着空的圖像，它是無效的圖像（很有可能，瀏覽器試圖再次加載同一頁面並以圖像形式顯示，這是不可能的），這就是為什么背景上方出現殘破的圖像圖標。 如果將空字符串替換為某些有效的圖像URL（例如， base64編碼的透明pixel ），則可能會根據需要呈現它。 但是這里真的需要img嗎？

Answer 3

您可以根據需要將其拉伸以填充空間：

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII="

HTML：

<img align="absmiddle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=" class="imgicons icons22">

在演示邊框中沒有

DEMO

1x1 PNG像素生成器