text-indent 也缩进吗？

发布于 2024-11-30 13:01:19 字数 477 浏览 2 评论 0原文

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

原文

i'm trying to use CSS to replace the image in html, so

<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;
}

But it doesn't seem to make any effect, any idea why??

-edit-

i have used this technique to replace text for an img, but never tried to replace img for another img

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

み零 2024-12-07 13:01:19

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/

The text-indent only works on inline elements in the flow, so if you'd use it for a line with inline element (or any other inline or inline-block elements) it would work.

However, you can replace an image with another image using CSS if you know the new image's dimensions using the following 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;
}

And here is a jsfiddle for you: http://jsfiddle.net/kizu/kNAgT/4/

回复收藏 0 原文