如何使用CSS隐藏alt文本，当图片不存在时？

Question

是否能够在所有浏览器中使用CSS隐藏alt文本？

我尝试使用 color:transparent，它可以在除了IE浏览器之外的所有浏览器中工作。

是否有可能使用CSS在IE中实现？非常感谢您提供的任何帮助。

- Mohamed Hussain

---

如果您不显示图像，那么拥有替代文本的意义是什么？ - Quentin

你可以使用 text-indent: -9999px;。 - Murad Hasan

@Quentin：需要进行SEO优化，并以替代方式处理图像失败的情况，显示默认图像。 - Mohamed Hussain

如果一段文本不够好让人类阅读，那么它也不足够好让搜索引擎处理。 - Quentin

我认为如果你到了这里，也许你应该考虑使用另一种“方法”来加载图像内容。我的意思是服务器端... - sebastian romero

Answer 1

使用 font-size: 0 怎么样？它可以在图片加载之前或者如果图片的 src 地址不存在时隐藏 alt 文本。

- TobinWebsites.com

---

非常适用于许多懒加载图片。谢谢。 - Robert

Answer 2

凯勒姆方法：

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

而且不会有使用-9999px方法所带来的性能缺陷，因为浏览器会绘制一个大小为9999像素的框。

更多解释请参见：替代-9999px-hack新图像替换方案

- Raynal Gobel

Answer 3

您可以使用text-indent:-9999px。

HTML

<img src="images/test.jpg" alt="alternative">

CSS

img{
  text-indent:-9999px
}

演示

- Gaurav Aggarwal

---

如果我们添加 line-height，那么 text-indent 将在所有浏览器中起作用...最好使用 line-height:1em;。 - Gaurav Aggarwal

使用 text-indent: -9999px 会使浏览器绘制出不必要的 9999 空白空间。请使用 kellum 方法。 - Raynal Gobel

Answer 4

你也可以使用 onerror 回调函数将显示属性设置为 none：

<img src="images/test.txt" onerror="this.style.display='none';">

- Martin Brandl

---

我已经在想为什么没有人在他们的回答中包含错误部分。 - St. Jan

Answer 5

不要使用color:transparent;，而应该使用display:none;。

但是不应该使用这种技术。

正如@Quentin在评论中所说：

如果文本不好看，则对于搜索引擎也不好。

您不应该隐藏alt文本。谷歌知道这只是用于SEO目的，没有任何重要性，并且会因此受到惩罚。您可能会被列入Google搜索引擎黑名单。

因此，不要仅出于SEO目的使用它们。

- Bhojendra Rauniyar

---

感谢@Bhijendra Nepal。颜色的值为透明，请参见规范https://www.w3.org/TR/css3-color/#transparent。Display:none不能解决我的问题。 - Mohamed Hussain

抱歉，我假设了。 - Bhojendra Rauniyar

@BhojendraNepal：这种情况有时候发生在所有人身上，包括我自己，没关系，谢谢你的帮助。 - Mohamed Hussain

@BhojendraNepal：再次感谢您对答案的编辑，我想隐藏浏览器未经样式处理的alt文本，默认情况下会显示出来。但是我没有提到我要将其从用户处隐藏，我可以使用伪元素选择器和content:attr(alt)，最终我希望避免FOUC问题。 - Mohamed Hussain

这个回答被downvote和未被接受是否有任何原因？ - Bhojendra Rauniyar

Answer 6

这对我来说似乎有效。只需将其添加到您的img样式中：

text-indent: -100%;
overflow: hidden;

- Artur Müller Romanov

Answer 7

我认为这是最好的解决方案：

img {
  text-indent: -100vw;
  overflow: hidden;
}

一个空的图像会居中显示，alt文本不会显示。同时它也不会溢出到其他图像上。

- Co ti

Answer 8

这个有效：

img {
  color: rgba(0, 0, 0, 0) !important;
}

<img src="example.jpg" alt="text you don't want to show for those who can see, but make it visible for screen readers" />

transparent 对我没有起作用。

- iorgv

Answer 9

使用 text-indent: -9999px; 和 display: none。

fiddle link

HTML

<h1 class="technique-four">
  <a href="#">
    <img src="images/header-image.jpg" alt="CSS-Tricks" />
  </a>
</h1>

CSS：

h1.technique-four {
    width: 350px; height: 75px;
    background: url("images/header-image.jpg");
    text-indent: -9999px;
    display: none;
}

- Murad Hasan