我可以使用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

你不能直接在CSS中設置alt屬性。然而，ALT將繼承樣式的項目的ALT上或由其父繼承什麼：

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

在上面的例子中，替換文本將是黑色的。然而，隨着顏色：白色的替代文字是白色的。

Answer 3

當然可以！

http://jsfiddle.net/VfTGW/

我做到這一點，作爲頭標誌圖像回退，我認爲IE的一些版本將不會遵守。 編輯：或Chrome顯然 - 我甚至沒有請參閱替代演示文稿（？）。然而Firefox工作正常。

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

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

Answer 4

您可以使用img[alt] {styles}來設計只有替代文本的樣式。

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

因爲這個問題是在搜索引擎的第一個結果

有一個問題選擇正確的 - 和由way-的解決方案是，如果你想添加樣式適用於像（例如邊框）的圖像。

例如：

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