Question

我正在使用精灵图像作为锚标记，它也是一个锚链接，如：

<a>Hello</a>

我的css：

a:link {
  background: url(sprites.PNG) no-repeat 0 0;
  color: #F7B600 !important;
  padding-left: 5px;
  padding-right: 7px;
}

我想仅为精灵背景图片提供高度和宽度。但是，如果我为锚点设置宽度和高度，那么锚点的文本将采用该维度。

有什么办法吗？

Answer 1

您必须在图像

的锚标记内使用元素

i {
    width: 46px;
    height: 44px;
    display: inline-block;
    background: url(http://www.w3schools.com/css/img_navsprites.gif) 0 0
}

<a href="#"><i></i>testing icon</a>

Answer 2

您需要为锚标记中的精灵图标创建一个额外的元素，如此

<a href="#">
    <span class="icon"></span>
    <span>Hello</span>
</a>

然后，您只需要为“icon”元素

应用精灵样式

.icon {
    width: 20px;
    height: 20px;
    background: url(sprites.PNG) no-repeat 0 0;
}

/*This is the style for the link*/
.span {
  color: #F7B600 !important;
  padding-left: 5px;
  padding-right: 7px;
}

如何将精灵图像添加到也具有锚文本的锚点

2 个答案: