イメージを表示しないで、代替テキストのみをCSSで表示

Question

代替テキストだけが表示されるようにイメージを非表示にすることは可能ですか？

私はモバイルデバイス上で見栄えの良いイメージを持っているので、代替テキストを代わりに表示し、それに応じてスタイルを変更します。

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"; 
    } 
}