什么是显示与CSS标志的正确方法？(What is the proper way to displa

我一直在学习CSS最近，和教程系列，我看说要显示标志图像的最好办法是包装在一个H1标签的文本，然后设置为标签的背景图像的CSS样式，用文本的-99999或类似的大数量缩进。

这似乎令人难以置信的hackish和不雅。 这也似乎是使用CSS来隐藏文本将是一个很大的禁忌搜索引擎优化的目的（如通过CSS隐藏文本皱眉）。

我也看到了，使用的IMG应该避免，因为标识本身是不是真的内容，所以应该退居编码（即CSS）的设计方。

什么是这个目前的共识？

Answer 1:

以显示标识正确的方法是用<img>的元素。 如果您有没有研究过的标志和标识 ，你可能没有意识到，一个标志都有自己的语义，需要在一个非常特殊的方式呈现。 它也可能有一个需要解释，这是应该在使用[alt]属性。

如果需要解释是合法的网页标题，这将是语义正确，将其添加到<h#>元素：

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

通常情况下，徽标用作链接，所以它经常可以看到：

<a href="/">
    <img src="logo.png"... />
</a>

此外，该标志可以强调（可能是一方或视度）：

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

---

要了解一个标志的语义。 如果你引用可口可乐公司，为品牌标志不会，如果你换出或删除样式表应该不会改变。 大多数人都明白，在语义上，

不同于

Answer 2:

我始终只是环绕图像的锚标记：

<a href=""><img src=""></a>

或创建锚标记为块，并设置背景图像

<a class="logo" href="">Logo</a>

.logo { background: url("/path") no-repeat; width: 100px; height: 100px; display: block; text-indent: -9999px;}

Answer 3:

你应该总是使用img标识显示。 使用h1和使用标志为背景是一个非常不好的做法，应该尽量避免。 您的标志是内容，而不是h1 。

哈里·罗伯茨在他的岗位清楚地解释它- 您的标志是一个图像，而不是一个<h1>

Answer 4:

我认为这并不重要 。 有这样做的许多不同的方式，和他们都支持。 他们所有的工作。 他们大多是搜索引擎友好的和完美的访问。

我会做这样的事情：

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>

搜索引擎，文本模式的浏览器和屏幕阅读器看到的替代文字，其他人看到的标志形象。

文章来源: What is the proper way to display a logo with CSS?