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>

在上面的示例中，alt文本将为黑色。但是使用颜色：白色alt文本是白色。

Answer 4

您可以通过以下方式在图片上设置Alt属性的样式：

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

Answer 5

在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 6

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

选择 - 和右边的解决方案存在问题，如果你想添加适用于图像的样式，例如（例如边框）。

例如：

＆＃13;

img {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}

＆＃13;

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

＆＃13;

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

还有另一种方法可以轻松解决此类问题，使用onerror并注入一些特殊类来处理中断的图像：

＆＃13;

.invalidImageSrc {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}

＆＃13;

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

＆＃13;

Answer 7

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

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

有关更多有用信息，请访问Alternate text for background images或The Ultimate Guide to Styled ALT Text in Email

Answer 8

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

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

8 个答案: