Html CSS精灵不适用于导航

基本上，我对使用CSS精灵还不熟悉，并且希望在图标导航中使用CSS精灵。基本上，目前我已经创建了一个精灵，它由两个图标组成，21px x 21px，文档大小是21px x 43px

.nav-main {
    position:relative;
    top: 19.5px;
}

.nav-main li a {
    background-image:url(../images/nav_sprite.png);
    background-repeat: no-repeat;
    height: 21px;
    width: 21px;
    display: block;
}
.nav-main li a.1 {
    background-position:0px 0px;
}
.nav-main li a:hover.1 {
    background-position:0px -23px;
}

这是我的尝试，我尝试了另一种方法，我删除了导航主视图的高度和宽度，但是当我这样做时，我没有留下任何图像。然后，我必须这样做，我有一个文本缩进删除文本，仍然显示图像，但它没有显示整个图像

该图像是如下所示的导航图像

---

---

---

我会使用一个截图，但我还不能包括一个图像：）但是的，我希望这个工作，但这是一个绝对的痛苦

---

有什么想法吗

类名不能使用数字，所以

.nav-main li a.1 { /*wrong*/
.nav-main li a.link1 { /*good*/

---

你不能用数字作为类名，所以

.nav-main li a.1 { /*wrong*/
.nav-main li a.link1 { /*good*/

不能使用“数字”作为类名。改为：

.nav-main li a.one {
    background-position:0px 0px;
}
.nav-main li a:hover.one {
    background-position:0px -23px;
}

我也清理了这个CSS块

.nav-main li a {
    background-image:url(../images/nav_sprite.png) no-repeat; // put no repeat on the same line
    height: 21px;
    width: 21px;
    display: block;
    background-position:0px 0px; // you can put this here as your base...the a.one is not needed. If you go this route, just remove ".nav-main li a.one" css function, but keep the "a:hover"
}

不能使用“数字”作为类名。改为：

.nav-main li a.one {
    background-position:0px 0px;
}
.nav-main li a:hover.one {
    background-position:0px -23px;
}

我也清理了这个CSS块

.nav-main li a {
    background-image:url(../images/nav_sprite.png) no-repeat; // put no repeat on the same line
    height: 21px;
    width: 21px;
    display: block;
    background-position:0px 0px; // you can put this here as your base...the a.one is not needed. If you go this route, just remove ".nav-main li a.one" css function, but keep the "a:hover"
}

---

为精灵使用背景图像时，会使站点无法访问。使用高对比度模式的低视力用户看不到背景图像。以下内容来自，是可访问精灵的一个很好的示例

HTML：

<div role="toolbar" class="toolbar">
  <button type="button" class="prnt">Print</button>
  <button type="button" class="find">Find</button>
  <button type="button" class="save">Save</button>
  <button type="button" class="sets">Settings</button>
  <button type="button" class="info">Info</button>
</div>

---

对于悬停效果，您可以使用类和psuedo选择器

：hover

将边距调整为适当的值。

使用精灵的背景图像时，您将无法访问站点。使用高对比度模式的低视力用户看不到背景图像。以下内容来自，是可访问精灵的一个很好的示例

HTML：

<div role="toolbar" class="toolbar">
  <button type="button" class="prnt">Print</button>
  <button type="button" class="find">Find</button>
  <button type="button" class="save">Save</button>
  <button type="button" class="sets">Settings</button>
  <button type="button" class="info">Info</button>
</div>

---

---

对于悬停效果，您可以使用类和psuedo选择器

：hover

将边距调整为适当的值。

Eeeck！只是提醒一下，这是不可接近的。使用高对比度模式的低视力用户看不到任何东西。对于可访问的精灵，我会查看更多信息。我想这是因为您使用数字作为一个类（例如1等）。下面是我的答案，沃尔索补充了一些减少代码行的技巧；）艾克！只是提醒一下，这是不可接近的。使用高对比度模式的低视力用户看不到任何东西。对于可访问的精灵，我会查看更多信息。我想这是因为您使用数字作为一个类（例如1等）。下面是我的答案，沃尔索补充了一些减少代码行的技巧；）这是很多不必要的代码，对于很少（不太可能的）浏览你的网站的人来说，他们可以容忍低视力。当然，我明白你的意思。但我相信，一个人的网站上的许多其他元素也将是不可访问的……除非你在一个流量很大的网站上工作，比如雅虎。如果你在一个联邦网站上工作，这是法律要求的，否则在国际海事组织（IMO）看来是不值得的。此外，即使只有少数人，为什么要排除他们，而只需要几条额外的线路就可以访问呢？我听到了。但这不仅仅是几行代码——这只适用于导航。网站的其他区域也需要更多的“可访问性”代码。不确定数字（我猜是OBV），但我想90%的网站不这样做……不幸的是，你可能是对的，90%的网站不这样做。尽管其他人都在做错事，但这并不意味着我们也应该做错事：）婴儿潮一代正在老龄化，因此视力有问题的用户数量将急剧增加。我宁愿在这一点上走在前面，也不愿意落后于它。这是很多不必要的代码，因为有人浏览你的网站时，很少（不太可能）会容忍低视力。当然，我明白你的意思。但我相信，一个人的网站上的许多其他元素也将是不可访问的……除非你在一个流量很大的网站上工作，比如雅虎。如果你在一个联邦网站上工作，这是法律要求的，否则在国际海事组织（IMO）看来是不值得的。此外，即使只有少数人，为什么要排除他们，而只需要几条额外的线路就可以访问呢？我听到了。但这不仅仅是几行代码——这只适用于导航。网站的其他区域也需要更多的“可访问性”代码。不确定数字（我猜是OBV），但我想90%的网站不这样做……不幸的是，你可能是对的，90%的网站不这样做。尽管其他人都在做错事，但这并不意味着我们也应该做错事：）婴儿潮一代正在老龄化，因此视力有问题的用户数量将急剧增加。我宁愿走在这条曲线的前面，也不愿落后于它。人们说我不应该使用精灵。。。。我应该使用图标字体还是精灵很好3杯就可以了。但图标字体肯定会更好——这是我现在通常采用的方式。结帐，这也是一个CDN（太棒了！）。提示：如果你的字体图标最初看起来有点“咯咯笑”或者看起来像是粗体的，请使用font-weight属性。这是一个常见的问题。你的代码运行得非常好，我有我使用的Icomoon Ultimate，我通常也使用图标字体。我只是想摆弄一下精灵看看他们是怎么工作的。我还将签出您发送给我的链接。酷，如果它有效，请毫不犹豫地接受答案。；）非常感谢；）我将坚持使用iconfonts；）但很高兴知道这是怎么回事。人们说我不应该用精灵。。。。我应该使用图标字体还是精灵很好3杯就可以了。但图标字体肯定会更好——这是我现在通常采用的方式。结帐，这也是一个CDN（太棒了！）。提示：如果你的字体图标最初看起来有点“咯咯笑”或者看起来像是粗体的，请使用font-weight属性。这是一个常见的问题。你的代码运行得非常好，我有我使用的Icomoon Ultimate，我通常也使用图标字体。我只是想摆弄一下精灵看看