html - 用字体大小替换图像：0

Question

我真的很喜欢用 杀死文本以替换图像font: 0/0 a，但据我所知，它并非在任何地方都有效。

所以我们还需要

text-indent: -9999px;
overflow: hidden;

为了这？

Answer 1

更新

您可以用背景替换图像并使用填充将实际图像移开。这只是众多解决方案之一。

http://jsfiddle.net/gj5F2/2/

CSS

div
{
    width: 550px;
    height: 190px;
    overflow: hidden;
}
.img2
{
    background: url('http://www.google.com/logos/2013/ghana_independence_day_2013-1202005-hp.jpg') no-repeat left top;
    padding-left: 550px;
}

HTML

<img class="img1" src="http://www.google.dk/images/srpr/logo4w.png" width="550" height="190" />

<div>
    <img class="img2" src="http://www.google.dk/images/srpr/logo4w.png" width="550" height="190" />
</div>

Answer 2

正如 Lister 先生所评论的，有很多很多不同的方法来进行图像替换。它们都有好坏两面。有一种技术唯一真正的缺点是它需要支持伪元素（所以 IE8+）。

• 没有额外的标记
• 适用于禁用图像
• 适用于透明图像
• 不需要调整字体大小
• 不需要弄乱定位

http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/

.nir {
   height:100px; /* height of replacement image */
   width:400px; /* width of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:inline-block;
   font-size:0;
   line-height:0;
}