1

我有一张翻转图像/链接的表格，我希望为此使用精灵，但由于某种原因，当代码仅显示一半左右的图像时，由于某种原因。

如果有人想在野外查看它，我的代码就在这里：http: //www.geckosourcing.co.uk/ebay/Promotions/Cross_Promotion.html http://www.geckosourcing.co.uk/ebay/Promotions/ Cross_Promotion.css

HTML：

<td height="88" width="88"><a class="1000AQwpanel" href="http://goo.gl/mOu8L">1000 Wetroom Panel</a></td>

CSS：

.1000AQwpanel {
    display: block;
    width: 88px;
    height: 88px;
    background: url('http://www.geckosourcing.co.uk/ebay/Promotions/Promotion_Sprite.jpg') -704px 880px;
    text-indent: -99999px;
}
.1000AQwpanel:hover {
    background-position: -704px 792px;
}

由于这段代码看起来与有效的部分相同，因此一直让我想到这一点。如果有人能指出我哪里出错了，那我就不用拔头发了。

谢谢

4

2 回答 2

4

我怀疑这是由于类名以数字开头：

class="760Corner"

有效的类名必须以字母、下划线或连字符开头。

于 2013-01-17T14:20:46.127 回答
1

类 / id 名称可能不以数字开头。Html 将使代码有效，这是导致问题的 css。

你可以使用不同风格的 CSS 来解决这个问题。

css

a[class="760corner"]{

}

PS。

为什么你的图像中有文字？尝试将文本放在这样的跨度中

HTML

<a class="corner-760">
    <span>Your text</span>
</a>

css

a {
    display: block;
    position: relative;
    background: url('../images/.....jpg');
    width: 80px;
    height: 80px;
}

a > span {
    display: block;
    text-align: center;
    height: 100%;
}


a:hover > span {
    display: none;
}

a.corner-760 {
    background-position: ........;
}
于 2013-01-17T14:42:38.853 回答