html img标签不适用于CSS精灵背景

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-encoded transparent 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 Pixel generator