Question

所以我的页面中有一系列可点击的图像。我试图通过生成包含我需要的所有图像的单个图像来优化它，并且我打算使用精灵来选择我想要的图像。我在找出向sprite添加锚标签的最佳方法时遇到了麻烦？

所以我在支持精灵的可点击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>

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

Answer 1

好的：

<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;
}

Answer 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;
}

Answer 3

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 code：

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

它完美呈现表格中的图像并点击！

带有精灵的可点击图片

3 个答案: