如何檢查與CSS如果圖像被加載或如果替代顯示？

Question

僅當圖像未加載並且正在顯示默認值時，我纔想應用以下樣式。

#chat-log section .msg img.avatar{ 
    background: purple; 
    color: white; 
    text-align: center; 
    padding-top: 10px; 
} 

但是，如果我應用它，當圖像被發現並加載它將扭曲圖像。 這裏是圖像

<img src="http://imageipsum.com/1200x675" alt="D" class="avatar"> 

Answer 1

你可以在「格」如下面的代碼包裹。這將把紫色放在後臺，如果圖片沒有加載，它會顯示。如果圖片加載，然後它會掩蓋這個「格」：

CSS例子（用你自己的類，什麼不可以）：

.avatar { 
     background: purple; 
     color: white; 
     text-align: center; 
     width: 1200px; 
     height: 675px; 
    } 
    .alt { 
     padding-top: 26%; 
     text-align: center; 
    } 

HTML例如：

<div class="avatar"> 
    <img src="http://imageipsum.com/1200x675"> 
    <div class="alt">D</div> 
</div>