不显示图像，仅使用 CSS 替换文本答案

【问题标题】：Don't show image, only alternate text with CSS不显示图像，仅使用 CSS 替换文本
【发布时间】：2017-02-16 22:15:09
【问题描述】：

是否可以让 CSS 使图像不可见，以便仅显示替代文本？

我的图片在移动设备上看起来不太好，所以我宁愿显示替代文本并相应地设置样式。

【问题讨论】：

没什么大不了的：
你可以使用类似this approach的东西。
Responsive CSS: Can I force rendering of alt text?的可能重复
无法使用 css 清除图像的来源。但是您可以使用一些辅助 div 并在移动设备上显示它。并在移动设备上隐藏您的图片
@HiDeo 我一开始就考虑使用它，但这意味着有两次相同的文本。如果 IMG 可以接受伪元素，一切都会变得更容易。

标签： css image alt

【解决方案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";
    }
}

【讨论】：

【解决方案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>

【讨论】：

和 isMobileView 类通信来自？
因为这将迫使我两次使用相同的文本。