3

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

以下 CSS 规则几乎可以按照我的意愿工作：

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

* {
  background-image: none !important;
}

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

同时，我更喜欢保留图像的替代文本，因为它可以帮助我确定特定图像是否是我想看到的。

有没有办法添加一个 CSS 规则来隐藏图像但显示它的替代文本，假设后者已设置？

4

3 回答 3

2

很确定这不是你目前只能用 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);
}

它用于waitForKeyElements处理 AJAX 驱动网站上的图像。

于 2015-08-20T20:10:58.723 回答
1

打开开发人员工具并在 javascript 控制台中运行以下 jquery 命令以隐藏所有图像。

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

当您按下回车键时，所有图像都将src属性关闭为空，并且将显示 alt 文本

于 2015-08-20T16:00:12.003 回答
0

一种选择是浏览器加载项：https ://chrome.google.com/webstore/detail/image-alt-text-viewer/hinbolcnfifkhlcehoakdledkfjiaeeg?hl=en （这是一个 chrome 示例）。

否则，请尝试：

content: attr(alt);

这不是您的完整解决方案，但希望它可以让您走上正确的道路。

于 2015-08-20T15:44:58.710 回答