1

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

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

例子:

在此处输入图像描述

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

4

2 回答 2

1

设置精灵的高度和宽度

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

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

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

在http://jsfiddle.net/SqbnC/上构建一个演示

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

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

于 2012-09-05T10:02:37.503 回答
0

您应该在 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 标记中没有文本,请使用填充。

于 2012-09-05T10:03:08.237 回答