Html 我可以使用 CSS 为图像的 ALT 文本设置样式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7101743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I style an image's ALT text with CSS?
提问by Mawg says reinstate Monica
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).
我有一个深蓝色页面，当图像加载（或丢失）时，ALT 文本为黑色且难以阅读（在 FF 中）。
Could I style it (with CSS) to be white?
我可以将它（使用 CSS）样式设置为白色吗？
回答by MikeM
Setting the imgtag colorworks
设置img标签color有效
img {color:#fff}
body {background:#000022}
img {color:#fff}<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />回答by Wesley Murch
Sure you can!
你当然可以！
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 seealt text in the demo(?). Firefox works well however.
我这样做是作为标题徽标图像的后备，我认为某些版本的 IE 不会遵守。编辑：或者 Chrome 显然 - 我什至没有在演示中看到替代文本（？）。然而，Firefox 运行良好。
img {
color: green;
font: 40px Impact;
}<img src="404" alt="Alt Text">回答by Jake Dempsey
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:
您不能直接在 css 中设置 alt 属性的样式。但是 alt 将继承 alt 所在项目的样式或其父项继承的样式：
<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.
在上面的例子中，替代文字将是黑色的。但是对于 color:white 替代文字是白色的。
回答by Clément
You can style the Alt attribut on an image by doing this :
您可以通过执行以下操作来设置图像上的 Alt 属性的样式：
img[alt] {
color: blue;
font-style: italic;
font-size: 14px;
}
回答by searching9x
In Firefox and Chrome (and possibly more) we can insert the string ‘( .... )' into the alt text of an image that hasn't loaded.
在 Firefox 和 Chrome（可能还有更多）中，我们可以将字符串 '( .... )' 插入到尚未加载的图像的替代文本中。
img {
font-style: italic;
color: #c00;
}
img:after {
content: " (Image - Right click to reload if not loaded)";
}
img::after {
content: " (Image - Right click to reload if not loaded)";
}<img alt="Alt text - " />回答by hassan
as this question is the first result at search engines
因为这个问题是搜索引擎的第一个结果
There are a problem with the selected -and right by the way- solution, is that if you want to add style that will apply to images like ( borders for example ) .
选择的问题 - 顺便说一下 - 解决方案是，如果您想添加将应用于图像（例如边框）的样式。
for example :
例如 ：
img {
color:#fff;
border: 1px solid black;
padding: 5px;
background-color: #ccc;
}<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />as you can see, all of images will apply the same style
如您所见，所有图像都将应用相同的样式
there is another approach to easily work around such an issue, using onerrorand injecting some special class to deal with the interrupted images :
还有另一种方法可以轻松解决此类问题，即使用onerror并注入一些特殊类来处理中断的图像：
.invalidImageSrc {
color:#fff;
border: 1px solid black;
padding: 5px;
background-color: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img onerror="$(this).addClass('invalidImageSrc')" src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img onerror="$(this).addClass('invalidImageSrc')" src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />回答by katsampu
You can use img[alt] {styles}to style only the alternative text.
您可以使用img[alt] {styles}仅设置替代文本的样式。
