我有一个深蓝色的页面，在图片正在加载或丢失时，ALT文本是黑色的，很难阅读（在FF中）。
我可以使用CSS将其样式化为白色吗？
7个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
89
设置 img 标签的 color 属性有效。
img {color:#fff}
body {background:#000022}
img {color:#fff}<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />- MikeM
1
16
当然可以！
我这么做是为了头部徽标图像的后备，我认为某些版本的IE不会遵守。 编辑: 或者显然是Chrome - 在演示中我甚至看不到alt文本。但是Firefox效果很好。
img {
color: green;
font: 40px Impact;
}<img src="404" alt="Alt Text">- Wesley Murch
1
1截至2018年，我在Chrome中也能正常看到它。我注意到的一件事是，在我检查过的任何浏览器中，text-decoration都不适用。 - Jacob C.
5
你无法直接在CSS中设置alt属性的样式。但是，alt属性将继承其所在项目的样式或其父级继承的样式：
<div style="background-color:black; height: 50px; width: 50px; color:white;">
<img src="ouch" alt="here i am"/>
<div>- Jake Dempsey
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" />- hassan
3
OP是否要求一个“纯”CSS解决方案？ - hassan
你看到我提到我的解决方案是一个权宜之计了吗？ - hassan
4为什么不呢？肯定有人会使用你的替代方案的 :-) - hassan
2
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 - " />- searching9x
0
是的，可以使用任何用于常规文本的样式属性来设置图像alt文本的样式，例如字体大小、字重、行高、颜色、背景颜色等。行高（文本）或垂直对齐（如果使用display:table-cell）也可用于在图像元素或图像包装容器中垂直对齐alt文本，即div。
为了避免对比度方面的无障碍问题，并且当您设置深蓝色背景颜色时，继承浏览器默认的黑色字体颜色，请始终同时设置字体和其背景颜色的颜色。
有关更多有用信息，请访问背景图像的替代文本或电子邮件中样式化ALT文本的终极指南。
- user14096240
-3
img[alt] {styles} 来仅为替代文本添加样式。
- katsampu
3
5这不是专注于替代文本，而是针对任何包含alt属性的图像元素。 - Mikko Tapionlinna
1你可以使用一个类来定位图片，或者使用正则表达式来定位特定的图片。简单的 CSS 啊，我的朋友。 - katsampu
3原问题询问如何针对alt文本进行样式设置，而您的回答中提到“仅为替代文本设置样式”。这个说法是不正确的。这并没有直接作用于文本，而是作用于周围的图像元素。如果我设置img[alt]{border:1px solid red;padding:10px;} ，这些更改将影响到图像本身，而不是alt文本。某些更改可能也会被继承到alt文本中（取决于浏览器实现方式）。但它并没有像您所说的那样只针对alt文本进行样式设置，而是只针对具有alt文本属性的图像元素进行样式设置。看到区别了吗？ - Mikko Tapionlinna
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
<font color =“＃FFFFFF”> <img ...> </ font>。那些日子真美好。 - BoltClock