不显示图像，只能与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"; 
    } 
}