1

で画像を置き換えるためにテキストを殺すのが本当に好きですfont: 0/0 aが、私が知っているように、それはどこでもうまくいくわけではありません。

それで、私たちはまだ必要ですか

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

このため？

4

2 に答える 2

1

リスター氏がコメントしたように、画像の置換を行うには多くの異なる方法があります。それらすべてには良い面と悪い面があります。唯一の本当の欠点は、疑似要素（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;
}
于 2013-03-06T13:02:15.240 に答える
1

更新しました

画像を背景に置き換え、パディングを使用して実際の画像を遠ざけることができます。これは多くのソリューションの 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>
于 2013-03-06T12:42:52.270 に答える