Comments on: Image Replacement in CSS3

By: 图像替换（文本） | overflow:hidden;

图像替换（文本） | overflow:hidden; — Sat, 20 Mar 2010 15:48:32 +0000

[...] Image Replacement in CSS3 [...]

By: James Oppenheim

James Oppenheim — Sun, 12 Jul 2009 11:33:00 +0000

What about a foreground-image that sits on top of the text node and has the same options as background-image. I think this would be a nice solution to image replacement.

By: Adam Luter

Adam Luter — Mon, 03 Mar 2008 15:12:18 +0000

@Raven – Just having better fonts won’t stop people from wanting image replacement. What about company logo’s? Shouldn’t there be text backing that? Maybe a logo can’t be represented in any format besides a jpg/png properly. (Mabye it’s — shudder — animated!).

But as I suggested, why is the alt=”" in a standard IMG so shunned? Are we trying to over engineer a solution? Certainly using an OBJECT tag would be best, since the “alt text” in it is arbitrary markup. But IE (even 7) totally botches this approach.

Which brings me to a question, OBJECT is mainly botched because IE is handling them itself, but it’s really a trigger for ActiveX controls. Could we write a small ActiveX control that displays images and use the classid to trigger it over the default image handler (the one that puts it in a little iframe-like sub-window for us)?

At worse, you’d have to put the image a second time in a second inner object tag (for the rest of the browsers). But maybe you can pull it off with one.

Another caveat is performance, perhaps it will render fine, perhaps it will not. But, if it’s only for a few images on the page, hopefully it may still be useful.

(This is IE afterall, we are working with little to begin with!)

-Adam

By: Raven

Raven — Fri, 29 Feb 2008 15:49:39 +0000

Perhaps, better way – just look at the side of “web fonts” in the css3?
I can’t understand why some one may want use image instead of text.

By: Peter Gasston

Peter Gasston — Thu, 21 Feb 2008 17:24:41 +0000

@ Mike: Yes, ‘contents’ refers to the content contained in the h1 tag.

By: Mike

Mike — Thu, 21 Feb 2008 17:17:07 +0000

so does “contents” refer to whatever is between the h1 tags, or do you have to actually write out what you want to display if the image were not available or turned off?

this sounds like a neat feature, despite the low-priority.

By: Trevor Davis | Blog | Weekly Link Round-Up #18

Trevor Davis | Blog | Weekly Link Round-Up #18 — Sun, 17 Feb 2008 00:57:56 +0000

[...] Image Replacement in CSS3 [...]

By: Haruka aka Seremel

Haruka aka Seremel — Tue, 12 Feb 2008 08:53:32 +0000

Stephanie, keyword “contents” (without quotes) substitues element’s content itself (i.e. nothing changed). So you need to specify “fallback” text only once – in HTML code itself. If that’s what are you asking.

By: Stephanie

Stephanie — Tue, 12 Feb 2008 06:15:56 +0000

Hm. Does the content method replace the text that is in the element? Does it remove the text and insert the image? How would a screen reader handle that?

Has there been any talk of a foreground-image property? I can think of some cool things to do with that off the top of my head some of them requiring multiple foreground images. Would the content method allow for that?

My primary use for image replacement at the moment is displaying a different set of images to mobile users than to desktop users and (hopefully) preserving the text for people with images turned off or screen readers. The content method would achieve the first goal but does it achieve the second two? Would I have to duplicate the fall back text for each device in their targeted style sheets?

By: Fatih Hayrioğlu’nun not defteri » 11 Şubat Web’den seçme haberler

Mon, 11 Feb 2008 19:37:28 +0000

[...] CSS3′de metin yerine resim koyma metodu. CSS3 ile her şey daha iyi olacak. Bağlantı [...]