HTML img標籤不符合CSS精靈後臺工作

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

輸出是：

enter image description here

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

來源

2014-03-31 Pink Code

邊框來自破碎的圖像（無效的SRC）。使用另一個非img標記，就像它下面的空A標記。 –

圖片沒有關閉''標籤。他們自動關閉''。 – j08691

@Diodeus：這是瀏覽器的大綱邊框 –

可以伸展出來填補空間，需要：

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

HTML：

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

在演示邊境無

DEMO

1x1 PNG Pixel generator

來源

2014-03-31 21:03:47

嘗試並將img標記更改爲div。你不能有一個空的圖像標籤，然後將圖像放入它的背景中......這不是它的工作原理。作爲背景的圖像屬於塊元素。

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

（我增加，以適應大img的div的大小，但你的想法...）

來源

2014-03-31 20:49:01 Phlume

空SRC並不意味着空的圖像，它的圖像無效（最可能瀏覽器會嘗試再次加載相同的頁面並以圖像形式顯示，這是不可能的），這就是爲什麼你會在背景上方看到破碎的圖像圖標。如果你用一些有效的圖像URL替換空字符串（例如base64-encoded transparent pixel），它可能會被渲染，只要你想。但是真的需要img嗎？

來源

2014-03-31 21:01:12

HTML img標籤不符合CSS精靈後臺工作

回答

相關問題