html - 如何为 div 中的图像添加 alt 标签以便靴子可以查看它？

Question

实际上我的代码如下所示。

<div id="logoSec"></div>
<style>
#logoSec {
    background-image: url("http://c.mtro.co/am/i/amlogo.png");
    background-position: center center;
    background-repeat: no-repeat;
    height: 66px;
    width: 100%;
} 
</style>

所以我想给图像添加 ALT。那我怎么给呢？这样靴子就可以查看了。

Answer 1

通常，如果要为图像赋予 alt 属性，则应使用 img 标签，而不是创建带有背景图像的 div。像这样：

<img src="http://c.mtro.co/am/i/amlogo.png" alt="Your alt text">

但是，如果这张图片是公司的徽标（看起来是这样），我建议使用 h1 元素，并用图片替换文本。这是语义，搜索引擎会更好地理解。它看起来像这样：

HTML

<h1 class="logo">America's Mattress</h1>

CSS

h1.logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url("http://c.mtro.co/am/i/amlogo.png") no-repeat center center;
  height: 66px;
  width: 100%;
}

您可以在此处阅读有关此图像替换技术的更多信息：REPLACING THE -9999PX HACK（新图像替换）