我可以使用 CSS 为图像的 ALT 文本设置样式吗？

Question

我有一个深蓝色页面，当图像加载（或丢失）时，ALT 文本为黑色且难以阅读（在 FF 中）。

我可以将它（使用 CSS）样式设置为白色吗？

Answer 1

设置img标签color有效

img {color:#fff}

http://jsfiddle.net/YEkAt/

 body {background:#000022} img {color:#fff}

 <img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />

Answer 2

你当然可以！

http://jsfiddle.net/VfTGW/

我这样做是作为标题徽标图像的后备，我认为某些版本的 IE 不会遵守。 编辑：或者 Chrome 显然 - 我什至没有在演示中看到替代文本（？）。 然而，Firefox 运行良好。

 img { color: green; font: 40px Impact; }

 <img src="404" alt="Alt Text">

Answer 3

您不能直接在 css 中设置 alt 属性的样式。 但是 alt 将继承 alt 所在项目的样式或其父项继承的样式：

 <div style="background-color:black; height: 50px; width: 50px; color:white;"> <img src="ouch" alt="here i am"/> <div>

在上面的例子中，替代文字将是黑色的。 但是对于 color:white 替代文字是白色的。

Answer 4

因为这个问题是搜索引擎的第一个结果

选择的问题 - 顺便说一下 - 解决方案是，如果您想添加将应用于图像（例如边框）的样式。

例如 ：

 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" />

如您所见，所有图像都将应用相同的样式

---

还有另一种方法可以轻松解决此类问题，使用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" />

Answer 5

您可以通过执行以下操作在图像上设置Alt attribut的样式：

img[alt] {
    color: blue;
    font-style: italic;
    font-size: 14px;
}

Answer 6

在 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 - " />

Answer 7

是的，可以使用用于常规文本的任何样式属性设置图像替代文本的样式，例如字体大小、字体粗细、行高、颜色、背景颜色等。 行高（文本）或垂直对齐（如果使用 display:table-cell）也可用于垂直对齐图像元素或图像包装容器（即 div）内的替代文本。

为防止有关对比度的可访问性问题，并在设置深蓝色背景颜色时继承浏览器的默认黑色字体颜色，请始终同时设置字体颜色和背景颜色。

有关更多有用的信息，请访问背景图像的替代文本或电子邮件中样式化替代文本的终极指南

Answer 8

您可以使用img[alt] {styles}仅设置替代文本的样式。