Question

我理解这个问题的标题是否听起来很无聊，但我现在已经学习了一些HTML // CSS了一段时间了！

我试图超链接图像本身，同时仍保留其在悬停时更改的能力，但我无法弄清楚如何。我目前正在做的是将文本设置为透明，使按钮链接到我想去的地方，因为我无法自己链接图像。

Here's a page with the current code I use for the buttons

此代码......

<style type="text/css">
...
.apple1 {
    width:110px;
    height:42px;
    background:transparent url(http://i.imgur.com/DpHlf33.png);
}

.apple1:hover {
    background-image:url(http://i.imgur.com/5NsAhep.png);
}

.apple2 {
    width:110px;
    height:42px;
    background:transparent url(http://i.imgur.com/P6TS6ik.png);
}
.apple2:hover {
    background-image:url(http://i.imgur.com/58NhKNy.png);
}

.apple3 {
    width:110px;
    height:42px;
    background:transparent url(http://i.imgur.com/5engqoR.png);
}
.apple3:hover {
    background-image:url(http://i.imgur.com/sA4YYsN.png);
}

.apple4 {
    width:110px;
    height:42px;
    background:transparent url(http://i.imgur.com/F3iqugS.png);
}
.apple4:hover {
    background-image:url(http://i.imgur.com/DDUJvGp.png);
}

.apple a {
    font-size:42px;
    color:transparent;
}
</style>

<body>
...
<div class="apple">
<div class="apple1"><a href="http://the-tutoriel.tumblr.com/check" title="* Check">Chec</a></div><br>
<div class="apple2"><a href="{text:Link 2 url}" title="{text:Link 2}">Talk</a></div><br>
<div class="apple3"><a href="{text:Link 3 url}" title="{text:Link 3}">Item</a></div><br>
<div class="apple4"><a href="/" title="* Spare">Spar</a></div><br>
</div>
...
</body>

Answer 1

有多种文本到图像替换技术。可访问的最可靠方法之一是添加overflow: hidden，将维度（width或height）设置为0，并将padding设置为所需的值归零维度：

.example {
    background: url(example.png) no-repeat;
    display: block; /* for inline elements like A */
    overflow: hidden;
    padding-top: 42px;
    width: 110px;
    height: 0;
}

如何超链接CSS制作的图像？

1 个答案: