Question

在网站上放置徽标的有效方法是什么。

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

和CSS

a.logo
{
    display: block;
    background-color: transparent;
    background-image: url("images/logo.png");
    background-position: center center;
    background-repeat: no-repeat;
    width: auto;
    height: auto;
}

OR

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

Answer 1

第二个选项肯定更好，因为<a>中只有CSS选项没有内容。

<a href="/">
  <img src="#" alt="Company Name">
</a>

如果您打算使用仅CSS选项，则需要执行以下操作：

<a href="/" aria-label="Company Name"></a>

或

<a href="/">
  <span class="sr-only">Company Name</span>
</a>

就您的CSS而言，您可能希望对图像选项执行此操作：

.logo {
  display: inline-block;
}

.logo img {
  display: block;
}

如果使用其中一个非图像选项，您可能需要执行以下操作：

.logo {
  display: inline-block;
  width: /* necessary width */;
  height: /* necessary height */;
  background: /* necessary background values */
}

编辑：屏幕阅读器只能在视觉上隐藏内容，但可供屏幕阅读器使用：

/* ie9+ */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Answer 2

您有两种不同的选择：

<强> HTML：

使用带有CSS属性div的{{1}}或a个标签在这种情况下，您的徽标是光栅图像（pnh / jpg / gif）。

<强> SVG：

使用SVG您的徽标是矢量，可以放大或缩小而不会丢失任何分辨率，如果您计划创建响应式设计，徽标大小可能因设备而异，则可能是一个很好的解决方案。 / p>

SVG链接示例： http://codepen.io/chriscoyier/pen/lCEux

Answer 3

这取决于你想要它的位置。您提到的第一种方法很难，因为无论父节点/元素是什么，您都将其定位为内部元素（位置将取决于父节点/元素）。

话虽这么说，我更喜欢第二种方法，当使用除文本之外的任何东西。您必须意识到，当您设置<a>标记的CSS属性时，它们旨在封装文本（而不是图像），因此当它被渲染时，您必须使（读取:) 你不会做出的奇怪调整（比如在CSS中设置line-height属性而不是height属性）。

我肯定会选择第二种方法。

如果它看起来很有趣，请确保在CSS中将a代码的text-decoration属性设置为none。

在HTML5中使用徽标的正确方法

3 个答案: