如何在图像不存在时使用CSS隐藏替代文字？

Question

是否可以在所有浏览器中使用CSS隐藏替代文字

我尝试使用color:transparent，它适用于除IE之外的所有浏览器。

是否可以使用CSS在IE中执行此操作？提前感谢您的帮助。

Answer 1

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

<强> HTML

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

<强> CSS

img{
  text-indent:-9999px
}

Demo

Answer 2

kellum方法：

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

如下所述：replacing-the-9999px-hack-new-image-replacement

Answer 3

而不是使用color:transparent;使用display:none;。

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

正如@Quentin在评论中所说：

  

如果文字对人类来说不够好，那么它对搜索引擎来说还不够好。

您不应隐藏替代文字。谷歌知道这只用于搜索引擎优化的目的，并没有什么重要的，并将惩罚这样的。您可能会被列入Google搜索引擎列入黑名单。

所以，不要仅仅将它们用于搜索引擎优化目的。

Answer 4

您还可以使用onerror回调将display属性设置为none：

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

Answer 5

如何使用font-size: 0？它可以在图像加载前或图像alt URL不可用时隐藏src文本。

Answer 6

使用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;
}

Answer 7

这有效：

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

transparent对我也不起作用。