1

所以我的页面中有一系列可点击的图像。我试图通过生成包含我需要的所有图像的单个图像来优化这一点，并且我打算使用精灵来选择我想要的。不过，我很难找出将锚标签添加到精灵的最佳方法吗？

所以我想要一个支持精灵的可点击 HTML 元素，最好不使用 JavaScript。我可以使用 JavaScript 做到这一点，但我宁愿避免它。

好的，这是我的代码，有什么：

.touringEscorted {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: 0 0;
}

.touringNew {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: -10px 0;
}

我试过了

<a href="#"><div class="touringEscorted"></a>

和

<a href="#" class="touringEscorted">&nbsp;</a>

和其他几个。似乎没有办法同时使用精灵/背景图像和锚标签。我对吗？有什么建议么？

4

3 回答 3

4

那好吧 ：

<a href="#" class="touringEscorted"></a>

应该工作，但添加display:block;到 CSS ：

.touringEscorted {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: 0 0;
    display:block;
}
于 2012-08-31T12:35:02.543 回答
2

像这样？

<a class="sprite sprite1" href="javascript:;">Link Text</a>

sprite {
  display: block;
  background: url(path/to/image/file.ext);
  text-indent: -9999px;
}
sprite1 {
  width: WWpx;
  height: HHpx;
  background-position: -NNpx - MMpx;
}
于 2012-08-31T12:33:05.073 回答
1

Google 不将屏幕外文本视为垃圾邮件吗？我想出了一个修改。我将链接放在另一个元素中，在本例中是一个表格。我在元素和链接中添加了背景图像类，如下所示：

CSS 代码：

.sprite{ 
    background: url('images/sprite.png') no-repeat top left; 
}   
.sprite.termite { 
    background-position: 0px -499px; 
    width: 150px; height: 113px;
    display: block;
}

HTML 代码：

<td class="td sprite termite">
    <a href="termite-photos.html" title="termite control" class="sprite termite"></a>
</td>

它完美地渲染了表格中的图像并点击！

于 2014-12-19T08:29:44.473 回答