用CSS展示标志的适当方式是什么？

Question

最近我一直在学习CSS，我正在看的教程系列认为展示标志图像的最佳方式是将文本包装在H1标签中，然后设置该标签的CSS样式为背景图像，并将文本缩进-9999或类似的大数值。

这种方法似乎非常粗糙和不优雅。此外，使用CSS隐藏文本似乎会对SEO产生负面影响（因为通过CSS隐藏文本被认为是不好的行为）。

我也读到过，应避免使用img，因为标志本身并不是真正的内容，所以应将其归入代码的设计方面（即CSS）。

目前人们对此持有什么样的共识？

- Mike Manfrin

---

为什么标志本身不算真正的内容？ - BoltClock

请查看此链接：https://dev59.com/wWsz5IYBdhLWcg3wTl0T - sandeep

告诉你标志不是“真正的内容”的人是错误的。 - zzzzBov

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>或<em>）。

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

---

为了理解标志的语义。如果您参考可口可乐公司，该品牌的标志在更改或删除样式表时不会更改，也不应更改。大多数人都理解这个语义。

是不同于

- zzzzBov

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

- chadpeppers

Answer 3

在显示标志时应始终使用 img 标签，而不是使用 h1 并将标志作为背景，这是一种非常糟糕的做法，应该避免。您的标志是内容，而不是 h1 标题。

Harry Roberts 在他的文章中清楚地解释了这一点 - Your logo is an image, not a <h1>

- apnerve

Answer 4

我认为这并不重要。有许多不同的方法来实现这个，它们都得到支持。它们都能工作。其中大多数对搜索引擎友好且完全可访问。

我会像这样做：

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

搜索引擎、文本模式浏览器和屏幕阅读器看到的是alt文本，其他人则看到标志性图片。

- Wander Nauta

---

从品牌和营销的角度来看，正确呈现标志非常重要。在CSS中放置标志是一种不正确的方法。对此，这确实很重要。 - zzzzBov