html - Sprite 作为背景图像：如何在更大的容器中显示？

Question

我需要使用精灵作为<a>标签元素类型的背景图像。问题是我只需要显示精灵的一部分（例如 17px x 17px）并且容器可以更高。在这种情况下，取而代之的是我的背景图像而不是空白空间，我得到了我想要的图像和下一张图像（我不想显示）。

有什么方法可以限制我想显示的精灵上的正方形的height和？width我不能height为width整体设定公正<a> tag。

例子：

在此处输入图像描述

我想做的是不显示第二张图片中位于同一精灵上的部分（这是唯一的例子；在项目中我在整行中显示文本，所以改变宽度不是解决方案）

score 1 · Accepted Answer

设置精灵的高度和宽度

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 17px;
       width: 17px;
}

编辑：在 OP 放一个截图之后

您需要将:before伪选择器与content属性一起使用

a:before{
  background:url('http://pf.staticfil.es/hp/img/sprite2.png');
  width: 22px ;
  height: 22px;
  display:inline-block;
    content:"";
}

我已将heightand指定width为 22px，因为这是我从精灵中显示的图标的尺寸

score 0 · Accepted Answer

您应该在 CSS 类中使用背景位置。举个例子..

.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}

根据要在 div 中显示的图像部分更新值 0 和 -20。最后你不应该在你的 Anchor 标签上使用 IMG 标签，你必须通过上面的 CSS 类传递图像。

<a class="classsample" href="#">TEXT</a>

如果 Anchor 标记中没有文本，请使用填充。

2 回答 2