does text-indent also indents <img>?
-
08-01-2021 - |
题
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
解决方案
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/
其他提示
No, it doesn't... because an image contains no text to indent.
However, you can achieve the affect you want by wrapping the image in another element, like a p
or div
.
So
<p class="flechaTooltip"><img src="oldpath" /></p>