我有一个深蓝色的页面,在图片正在加载或丢失时,ALT文本是黑色的,很难阅读(在FF中)。
我可以使用CSS将其样式化为白色吗?
设置 img
标签的 color
属性有效。
img {color:#fff}
body {background:#000022}
img {color:#fff}
<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />
当然可以!
我这么做是为了头部徽标图像的后备,我认为某些版本的IE不会遵守。 编辑: 或者显然是Chrome - 在演示中我甚至看不到alt文本。但是Firefox效果很好。
img {
color: green;
font: 40px Impact;
}
<img src="404" alt="Alt Text">
你无法直接在CSS中设置alt属性的样式。但是,alt属性将继承其所在项目的样式或其父级继承的样式:
<div style="background-color:black; height: 50px; width: 50px; color:white;">
<img src="ouch" alt="here i am"/>
<div>
由于这个问题是搜索引擎的首要结果,因此需要解决它。
选择的解决方案存在问题,也是正确的,就是如果您想添加应用于图像的样式(例如边框),则会出现问题。
例如:
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" />
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 - " />
是的,可以使用任何用于常规文本的样式属性来设置图像alt文本的样式,例如字体大小、字重、行高、颜色、背景颜色等。行高(文本)或垂直对齐(如果使用display:table-cell)也可用于在图像元素或图像包装容器中垂直对齐alt文本,即div。
为了避免对比度方面的无障碍问题,并且当您设置深蓝色背景颜色时,继承浏览器默认的黑色字体颜色,请始终同时设置字体和其背景颜色的颜色。
有关更多有用信息,请访问背景图像的替代文本或电子邮件中样式化ALT文本的终极指南。
img[alt] {styles}
来仅为替代文本添加样式。
<font color =“#FFFFFF”> <img ...> </ font>
。那些日子真美好。 - BoltClock