不顯示圖像，只能與CSS替代文本

Question

是否有可能讓CSS呈現圖像不可見，因此只有替代文本顯示？

我有一個圖片在移動設備上看起來不太好，所以我寧願顯示替代文字，並相應地設計它。

Answer 1

如果您能夠分辨訪問者是否在移動設備上，爲什麼不只是隱藏圖像並顯示常規文本？如果您使用的是知道手機大小的響應式CSS，則可以通過CSS來完成。

<style> 
.isMobileView #BlurryImg{display:none;} 
.isMobileView #MobileTxt(display:block;} 
</style> 
<img id="BlurryImg" src="image.gif" alt="some text"/> 
<span id="MobileTxt" style="display:none;">some text</span> 

Answer 2

試試這個

HTML

<div class="example"> 
<image src="img.jpg" alt="alternative text"> 
</div> 

CSS

@media (max-width: 767px) { /* change to any number you want */ 
    div.example img{ 
     display:none; 
    } 
    div.example:after{ 
     content:"alternative text"; 
    } 
}