html - alt属性中的文字会出现的原因

Question

我尝试使用文本浏览器打开 HTML 页面。是的，img标签的alt属性的值出现了。然后我没有放 alt 属性，而是使用了 CSS：

.headerImg:after, .headerImg::after
        { 
            content:" (the alternative)"; 
        }

我希望文本出现在最新的浏览器中。如何？除了它们被放置在不同的路径之外，图像不会显示的原因是什么？

Answer 1

文本浏览器通常不支持 CSS。他们可以实现 CSS 的某些部分，尤其是在文本样式方面，但大多数 CSS 东西在纯文本渲染中没有多大意义，所以他们没有打扰。（要看到这一点，请使用一些非常简单的 CSS 代码进行测试，这些代码通常在图形浏览器中得到很好的支持，并且也可以在文本浏览器中实现，例如text-transform: uppercase.

alt在不显示图像的情况下，该属性应该指定图像的替代文本。这种情况通常涉及忽略 CSS 的浏览器（例如，文本浏览器、听觉浏览器）或覆盖作者的大部分 CSS 代码（例如，具有非常特定设置的图形浏览器以帮助具有某种特定类型视觉障碍的视觉对象）。所以尝试使用 CSS 代替alt.

Answer 2

我不知道我是否很好地理解了这个问题。如果你想在图像加载后显示 de alt 值，你应该试试这个：

.headerImg:after { 
    content: attr(alt) 
}

如果您想更改图像的 alt 值，您可以使用 jquery：

$('#image1').attr({
  alt: 'Alternative description',
  title: 'Alternative description'
});