是否能够在所有浏览器中使用CSS隐藏alt文本?
我尝试使用 color:transparent
,它可以在除了IE浏览器之外的所有浏览器中工作。
是否有可能使用CSS在IE中实现?非常感谢您提供的任何帮助。
使用 font-size: 0
怎么样?它可以在图片加载之前或者如果图片的 src
地址不存在时隐藏 alt
文本。
凯勒姆方法:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
而且不会有使用-9999px
方法所带来的性能缺陷,因为浏览器会绘制一个大小为9999像素的框。
更多解释请参见:替代-9999px-hack新图像替换方案
onerror
回调函数将显示属性设置为 none:<img src="images/test.txt" onerror="this.style.display='none';">
不要使用color:transparent;
,而应该使用display:none;
。
但是不应该使用这种技术。
正如@Quentin在评论中所说:
如果文本不好看,则对于搜索引擎也不好。
您不应该隐藏alt文本。谷歌知道这只是用于SEO目的,没有任何重要性,并且会因此受到惩罚。您可能会被列入Google搜索引擎黑名单。
因此,不要仅出于SEO目的使用它们。
这对我来说似乎有效。只需将其添加到您的img
样式中:
text-indent: -100%;
overflow: hidden;
我认为这是最好的解决方案:
img {
text-indent: -100vw;
overflow: hidden;
}
一个空的图像会居中显示,alt文本不会显示。同时它也不会溢出到其他图像上。
这个有效:
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
对我没有起作用。
text-indent: -9999px;
和 display: none
。
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;
}
text-indent: -9999px;
。 - Murad Hasan