代码之家 › 专栏 › 技术社区 › Liam Joshua

带有精灵的可点击图像

css-sprites anchor html

Liam Joshua · 技术社区 · 12 年前

所以我的页面上有一系列可点击的图片。我试图通过生成一个包含我需要的所有图像的单个图像来优化这一点,我打算使用精灵来选择我想要的图像。不过,我很难找到向精灵添加锚点标签的最佳方式?

所以我想要一个支持精灵的可点击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>

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

3 回复 | 直到 12 年前

darma 12 年前

好的,那么:

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

yunzen 12 年前

像这样?

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

Harry dbr 10 年前

难道谷歌不认为屏幕外的文字是垃圾邮件吗?我想出了一个修改方案。我把链接放在另一个元素中,在本例中是一个表。我在元素和链接中添加了背景图像类,如下所示:

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>

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

推荐文章

Avery9115 · 锚定链接HTML

7 年前

Asjadaun · 锚定Fab按钮

7 年前

RjC · 如何以编程方式将约束关系设置为视图而不是子视图?

7 年前

amit · 如何使响应导航栏菜单在单击锚定链接后自动关闭?

7 年前

Rohail Abbas · ID的超链接-HTML

7 年前

Suppy · OnClick将用户重定向到另一个url[关闭]

7 年前

GeniusboyWonder · 锚定链接到同一站点上的另一个页面

7 年前

Rober.Ya · 单击时锚点有一个子项

7 年前

user8652270 · 如何从Cookiebot(外部JavaScript)在cookie横幅中注入(通过JavaScript添加)锚文本和普通文本?

7 年前

Andrii Pryimak · 使用JS/Ajax动态获取带有锚点的URL

7 年前