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 +）。

无额外加价
禁用图片
使用透明图像
不需要调整font-size
不需要搞乱定位

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

使用font-size替换图像：0

2 个答案: