Html 如何强制图像'；是否显示alt文本而不是图像？

有一个网站的文字我很感兴趣阅读，但伴随它的图像可能有我不想看到的内容。我正在尝试使用Firefox扩展为该网站添加一条规则

以下CSS规则几乎与我所希望的一样：

img {
  display: none !important;
  /* visibility: hidden !important; */
}

* {
  background-image: none !important;
}

（注释行是另一种选择；我知道这两种选择之间的区别）

同时，我更喜欢显示图像的alt文本，因为它可以帮助我决定特定的图像是否是我想看到的图像

---

如果设置了alt文本，有没有办法添加CSS规则来隐藏图像，但显示其alt文本？

一个选项是浏览器加载项：（这是一个chrome示例）

否则，请尝试：

content: attr(alt);

---

这不是您的完整解决方案，但希望它能让您走上正轨。

打开开发工具，在javascript控制台中运行jquery命令以隐藏所有图像

$('img').attr('src','');

---

当您按enter键时，所有图像的src属性都将为空，并且alt文本将显示非常确定这不是您当前仅使用CSS就可以做到的。你需要一个用户脚本

安装Greasemonkey、Tampermonkey或类似产品。然后此用户脚本将工作：

// ==UserScript==
// @name     _Hide pics except for alt text
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( "                                 \
    * {                                         \
        background-image: none !important;      \
    }                                           \
" );

waitForKeyElements ("img", hideImageExceptForAltText);

function hideImageExceptForAltText (jNode) {
    var oldSrc  = jNode.attr ("src");
    jNode.attr ("src", "");
    jNode.attr ("data-oldSrc", oldSrc);
}

---

它使用

waitforkyelments

在AJAX驱动的站点上处理图像。

使用？这是一个有用的想法，但在每次页面更改时运行控制台脚本并不实际。另外，并非每个页面/站点都使用jQuery。谢谢您的建议！我使用您的脚本作为基础，制作了一个隐藏图像（而不仅仅是更改src）并显示链接以显示它们的脚本。但是，直到加载页面并显示一段时间后，才会发生这种情况。有没有办法让它在页面加载时运行，这样图像就不会显示？是的，但这是一个新的/单独的问题。将此标记为已接受，并询问其他问题。请确保包含相关代码。本问题中提到了Firefox，据我所知，其他浏览器中没有使用greasemonkey这个名称。无论如何，它也会在另一个问题中提到。哎呀，我现在看到FF提到了。出于某种原因，我刚刚输入了[时尚]。这是一个跨浏览器的扩展。我是第一个提到Greasemonkey的人，这个脚本也是跨浏览器的。问题是：