Не показывать изображение, только альтернативный текст с CSS

Question

Можно ли сделать так, чтобы CSS отображал изображение невидимым, чтобы отображался только альтернативный текст?

У меня есть изображение, которое не очень хорошо выглядит на мобильных устройствах, поэтому я предпочитаю показывать альтернативный текст и стилизовать его соответствующим образом.

Answer 1

Попробуй это

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

Answer 2

Если вы можете сказать, если посетитель на мобильном телефоне, почему бы просто не скрыть изображение и показать обычный текст? Если вы используете адаптивный 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>