Не показывать картинку, просто чередовать текст с помощью 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"; 
    } 
}