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

不，它没有......因为图像不包含要缩进的文本。

但是，您可以通过将图像包装在另一个元素中来实现所需的效果，例如 ap或div。

所以

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

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

于 2011-08-22T11:55:22.673 回答