Question

基本上，我是使用CSS Sprites的新手，并希望对图标导航这样做。基本上，目前我创建了一个精灵，它由两个图标组成，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的高度和宽度但是当我这样做时，我没有留下任何图像。然后我必须这样做，以便我有一个文本缩进删除文本仍然显示图像，但它没有显示整个图像。

图像是导航的图像

我会使用屏幕截图，但我还不能包含图片:)但是，我希望这可以工作，但这是一种绝对的痛苦。

有什么想法吗？

Answer 1

您不能将“数字”用作班级名称。改为：

.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"
}

Answer 2

您不能将数字用于类名，所以

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

Answer 3

为sprite使用背景图片时，您的网站无法访问。使用高对比度模式的低视力用户看不到背景图像。以下来自Yahoo's Accessibility Blog，是可访问精灵的一个很好的例子。

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>

CSS：

.toolbar {
  border: 1px solid #666;
  background: #ddd;
  padding: 3px;
  font-size: 0;
  /* Eliminates white space below and between buttons */
}

.toolbar button {
  border: 1px solid #333;
  background: #bbb;
  padding: 0; 
  margin: 0 3px 0 0;
  width: 36px;
  height: 36px;
  overflow: hidden;
  vertical-align: top; /* Needed for Firefox to ensure buttons are properly aligned inside the toolbar. */
}

/* Remove the extra padding and border given to buttons by   
default in Firefox to ensure correct alignment of the img. */
.toolbar button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* The above rule removes the focus outline in Firefox.  This rule restores it. */
.toolbar button:focus {
  outline: dotted 1px #000;
}

/* Hide the text label by inserting an image before it. */
.toolbar button:before {
  display: inline-block;
  content: url('http://findicons.com/files/icons/2340/preview/toolbar_icon_set_full.png');
}

.toolbar button {
  *background:    url('http://findicons.com/files/icons/2340/preview/toolbar_icon_set_full.png') no-repeat;
  *text-indent: 36px;
}

.toolbar .prnt {
   *background-position: -38px -74px;
}

.toolbar .prnt:before {
  margin: -73px 0 0 -37px;
}

.toolbar .find {
  *background-position: -182px -146px;
}
.toolbar .find:before {
  margin: -145px 0 0 -181px;
}

.toolbar .save {
  *background-position: -146px -74px;
}

.toolbar .save:before {
  margin: -73px 0 0 -145px;
}

.toolbar .sets {
  *background-position: -74px -110px;
}

.toolbar .sets:before {
  margin: -109px 0 0 -73px;
}

.toolbar .info {
  *background-position: -146px -146px;
}

.toolbar .info:before {
  margin: -145px 0 0 -145px;
}

对于悬停效果，您可以使用类和伪相选择器:hover将边距调整为适当的值。

CSS Sprites不适用于导航

3 个答案: