Html 当图像不存在时如何使用 CSS 隐藏替代文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36305805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide alt text using CSS when the image is not present?
提问by Mohamed Hussain
Is it possible to hide the alt text using CSS in all the browsers,
是否可以在所有浏览器中使用 CSS 隐藏替代文本，
I tried with color:transparent, it is working in all browsers except IE.
我尝试过color:transparent，它在除 IE 之外的所有浏览器中都有效。
Is it possible to do it in IE using CSS?. Thanks in advance for any help.
是否可以使用 CSS 在 IE 中执行此操作？在此先感谢您的帮助。
回答by Gaurav Aggarwal
回答by Raynal Gobel
The kellum method:
凯伦方法：
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
as explained here: replacing-the-9999px-hack-new-image-replacement
回答by TobinWebsites.com
How about using font-size: 0? It works in hiding alttext before image loads or if image srcURL is not available.
怎么用font-size: 0？它适用于alt在图像加载之前或图像srcURL 不可用时隐藏文本。
回答by Bhojendra Rauniyar
Instead of using color:transparent;use display:none;.
而不是使用color:transparent;use display:none;。
But you should not usethis technique.
但是你不应该使用这种技术。
As @Quentin said in the comment:
正如@Quentin 在评论中所说：
If the text isn't good enough for humans then it isn't good enough for search engines.
如果文本对人类来说不够好，那么对于搜索引擎来说也不够好。
You should not hide the alt text. Google knows this only used for SEO purpose and nothing important and will penalize for such. And you may be blacklisted on Google Search Engine.
您不应该隐藏替代文本。谷歌知道这仅用于搜索引擎优化目的，没有什么重要的，并会因此受到惩罚。您可能会在 Google 搜索引擎上被列入黑名单。
So, don't use them just for SEO purpose.
因此，不要仅将它们用于 SEO 目的。
回答by Martin Brandl
You could also use the onerrorcallback to set the display property to none:
您还可以使用onerror回调将显示属性设置为无：
<img src="images/test.txt" onerror="this.style.display='none';">
回答by Sándor Zuboly
This worked:
这有效：
img{
color: rgba(0, 0, 0, 0) !important;
}
transparentdidn't work for me too.
transparent对我也不起作用。
回答by Murad Hasan
Use text-indent: -9999px;and display: none.
使用text-indent: -9999px;和display: none。
HTML
HTML
<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>
CSS:
CSS：
h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
display: none;
}
