如何强制显示图像的替代文字而不是图像? [英] How to force an image's alt text to display instead of the image?
问题描述
有一个网站的文本我有兴趣阅读,但伴随它的图片可能包含我不希望看到的内容。我试图使用Firefox扩展程序Stylish来为该网站添加规则。
There is a website whose text I am interested in reading, however the images that accompany it may have content which I'd prefer not to see. I'm trying to use the Firefox extension Stylish to add a rule for that website.
以下CSS规则几乎可以按我的意愿工作:
The following CSS rules work almost as I'd prefer:
img {
display: none !important;
/* visibility: hidden !important; */
}
* {
background-image: none !important;
}
(注释行是另一种选择;我意识到两个选项)
(The commented line is an alternative; I am aware of the difference between the two options)
同时,我宁愿保留显示图像的替代文字,因为它可以帮助我确定具体图像是否是一个'd喜欢看。
At the same time, I'd prefer to keep the alt-text of images displayed, as it may help me decide whether the specific image is one I'd like to see.
有没有什么办法可以添加CSS规则来隐藏图片,但是显示其alt-text,假设后者已设置? p>
Is there any way to add a CSS rule that will hide the image but display its alt-text, supposing the latter is set?
推荐答案
很确定这不是你现在可以用CSS做的事情。你需要一个脚本。
Pretty sure this is not something you can currently do with just CSS. You need a userscript.
安装Greasemonkey或Tampermonkey或类似软件。然后这个脚本将工作:
Install Greasemonkey, or Tampermonkey, or similar. Then this userscript will work:
// ==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驱动的网站上处理图片。
It uses waitForKeyElements
to handle images on AJAX-driven sites.
这篇关于如何强制显示图像的替代文字而不是图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!