Question

我正在尝试使用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;
}

但它似乎没有任何效果，任何想法为什么？

-edit -

我使用这种技术替换img的文本，但从未尝试将img替换为另一个img

Answer 1

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/

Answer 2

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

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

所以

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

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

text-indent是否也缩进<img/>？

2 个答案: