2

基本上，我是使用 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 a 的高度和宽度，但是当我这样做时，我没有图像。然后我必须这样做，以便我有一个文本缩进来删除文本并仍然显示图像，但它没有显示整个图像。

图像是看起来像这样的导航

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

有任何想法吗？

4

3 回答 3

2

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

.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"
}
于 2013-11-12T20:53:38.127 回答
1

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

.nav-main li a.1 { /*wrong*/
.nav-main li a.link1 { /*good*/
于 2013-11-12T20:44:50.413 回答
1

为精灵使用背景图像时，您会使您的网站无法访问。使用高对比度模式的低视力用户看不到背景图像。以下来自雅虎的无障碍博客，是无障碍精灵的一个很好的例子。

的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将边距调整为适当的值。

于 2013-11-12T21:01:00.520 回答