圖片替換字體大小：0

Question

我真的很喜歡用font: 0/0 a殺死圖片替換的文本，但據我所知，它並不是真的可以在任何地方工作。

所以我們還需要

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

這個？

Answer 1

由於李斯特先生表示，還有很多，很多不同方式做形象更換。它們都有上下兩面。有一種技術唯一真正的缺點是它需要支持psuedo元素（所以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; 
} 

Answer 2

更新

您可以用背景替換圖像，並使用填充移動實際的圖像了。這只是衆多解決方案之一。

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>