1

CSSを使用してHTMLの画像を置き換えようとしているので、

<img class="flechaTooltip" src="oldpath" />

turns into

    .flechaTooltip {
    width: 0;
    height: 0;
    padding: 11px 209px 0 0; /* New image's dimensions here */
    background: url(../../nImg/flechaTooltipGris.gif) no-repeat;
    /* Removing image from older Opera */
    content: "";
    display: inline-block;
}

しかし、それは何の効果ももたらさないようです、なぜか？

-編集-

私はこのテクニックを使用してimgのテキストを置き換えましたが、imgを別のimgに置き換えようとしたことはありません

4

2 に答える 2

4

フロー内のtext-indentインライン要素でのみ機能するため、インライン要素 (または他のインラインまたはインラインブロック要素) を含む行に使用する場合は機能します。

ただし、次の CSS を使用して新しい画像のサイズがわかっている場合は、CSS を使用して画像を別の画像に置き換えることができます。

.flechaTooltip {
    width: 0;
    height: 0;
    padding: 50px 300px 0 0; /* New image's dimensions here */
    background: url(newpath);
    /* Removing image from older Opera */
    content: "";
    display: inline-block;
}

そして、ここに jsfiddle があります: http://jsfiddle.net/kizu/kNAgT/4/

于 2011-08-22T12:40:21.813 に答える
1

いいえ、そうではありません...画像にインデントするテキストが含まれていないためです。

pただし、画像をaや。などの別の要素でラップすることで、必要な効果を得ることができますdiv。

それで

<p class="flechaTooltip"><img src="oldpath" /></p>

例： http： //jsfiddle.net/jasongennaro/v7GyN/

于 2011-08-22T11:55:22.673 に答える