Can I style an image's ALT text with CSS?
I have a dark blue page and when the image is loading (or missing) the ALT text is black and difficult to read (in FF).
Could I style it (with CSS) to be white?
Setting the img
tag color
works
img {color:#fff}
http://jsfiddle.net/YEkAt/
body {background:#000022}
img {color:#fff}
<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />
Sure you can!
http://jsfiddle.net/VfTGW/
I do this as a fallback for header logo images, I think some versions of IE will not abide. Edit: Or Chrome apparently - I don't even see alt text in the demo(?). Firefox works well however.
img {
color: green;
font: 40px Impact;
}
<img src="404" alt="Alt Text">
You cant style the alt attribute directly in css. However the alt will inherit the styles of the item the alt is on or what is inherited by its parent:
<div style="background-color:black; height: 50px; width: 50px; color:white;">
<img src="ouch" alt="here i am"/>
<div>
In the above example, the alt text will be black. However with the color:white the alt text is white.