使用 CSS 显示徽标的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10125335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the proper way to display a logo with CSS?
提问by Mike Manfrin
I've been learning CSS recently, and the tutorial series I'm watching says the best way to display a logo image is to wrap the text in an H1 tag, then set the CSS style for that tag to background image, with a text indent of -99999 or similarly large number.
我最近一直在学习 CSS，我正在观看的教程系列说显示徽标图像的最佳方法是将文本包裹在 H1 标签中，然后将该标签的 CSS 样式设置为背景图像，并带有文本-99999 或类似的大数字缩进。
This seems incredibly hackish and inelegant. It also seems like using CSS to hide text would be a big no-no for SEO purposes (as hiding text via CSS is frowned upon).
这看起来令人难以置信的骇人听闻和不优雅。似乎使用 CSS 隐藏文本对于 SEO 目的来说也是一个很大的禁忌（因为通过 CSS 隐藏文本是不受欢迎的）。
I've also read that using an img should be avoided, as the logo itself is not really content, so should be relegated to the design-side of the coding (i.e. CSS).
我还读到应该避免使用 img，因为徽标本身并不是真正的内容，因此应该归入编码的设计方面（即 CSS）。
What is the current consensus on this?
目前对此的共识是什么？
回答by zzzzBov
The correct way to display a Logo is with an <img>element. If you haven't studied logos and logotype, you might not realize that a logo has its own semantics and is required to be presented in a very specific manner. It may also have a required interpretation, which is what should be used in the [alt]attribute.
显示徽标的正确方法是使用<img>元素。如果您没有研究过logos 和 logotype，您可能不会意识到 logo 有自己的语义，需要以非常具体的方式呈现。它也可能有一个必需的解释，这就是应该在[alt]属性中使用的解释。
If that required interpretation is legitimately a heading in the page, it would be semantically correct to add it to a <h#>element:
如果所需的解释合法地是页面中的标题，则将其添加到<h#>元素在语义上是正确的：
<h1>
<img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>
Typically the logo is used as a link, so it's common to see:
通常，徽标用作链接，因此通常会看到：
<a href="/">
<img src="logo.png"... />
</a>
Additionally the logo can be emphasized (could be either <strong>or <em>depending on degree):
此外，可以强调徽标（可以是<strong>或<em>取决于程度）：
<strong>
<a href="/">
<img src="logo.png" ... />
</a>
</strong>
To understand the semantics of a logo. If you're referencing the Coca-cola company, the logo for the brand would not, and should not change if you swapped out, or removed a stylesheet. Most people understand that semantically,
理解标志的语义。如果您引用的是可口可乐公司，则该品牌的徽标不会，并且如果您换出或删除样式表，也不应该更改。大多数人从语义上理解，
is different from
不同于
回答by chadpeppers
I always just wrap an anchor tag around an image:
我总是在图像周围包裹一个锚标签：
<a href=""><img src=""></a>
or create the anchor tag as a block and set a background image
或将锚标记创建为块并设置背景图像
<a class="logo" href="">Logo</a>
.logo {
background: url("/path") no-repeat;
width: 100px;
height: 100px;
display: block;
text-indent: -9999px;
}
回答by apnerve
You should always use imgto display the logo. Using h1and using the logo as background is a really bad practice and should be avoided. Your logo is the content and not a h1.
您应该始终使用img来显示徽标。使用h1和使用徽标作为背景是一种非常糟糕的做法，应该避免。您的徽标是内容而不是h1.
Harry Roberts has explained it clearly in his post - Your logo is an image, not a <h1>
Harry Roberts 在他的帖子中清楚地解释了这一点 -你的标志是一个图像，而不是一个<h1>
回答by Wander Nauta
I think it doesn't really matter. There are many different ways of doing this, and they're all supported. They all work. Most of them are search engine-friendly and perfectly accessible.
我认为这并不重要。有许多不同的方法可以做到这一点，并且它们都得到支持。他们都工作。他们中的大多数都是搜索引擎友好的并且完全可以访问。
I would do something like this:
我会做这样的事情：
<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>
Search engines, text-mode browsers and screen readers see the alt text, everyone else sees the logo image.
搜索引擎、文本模式浏览器和屏幕阅读器看到替代文本，其他人看到徽标图像。
