Question

有一个网站的文字我有兴趣阅读，但是它附带的图片可能包含我不想看的内容。我试图使用Firefox扩展名为该网站添加规则。

以下CSS规则几乎与我一样：

$the_query = new WP_Query( array( 'post_id' => '$id', 'post_type' => 'custom' ) );
// The Loop

while ( $the_query->have_posts() ) : $the_query->the_post();

echo '<li>';
the_title();
echo '</li>';
endwhile;

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

与此同时，我更愿意保留图片的替代文字，因为这可能有助于我决定特定的图片是否是我想看到的。

是否有任何方法可以添加隐藏图像但显示其alt文本的CSS规则，假设后者已设置？

Answer 1

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

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

当您按Enter键时，所有图像的 src 属性将关闭null，并且将显示alt文本

Answer 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驱动网站上的图像。

Answer 3

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

否则，请尝试：

content: attr(alt);

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

如何强制显示图像的替代文字而不是图像？

3 个答案: