Question

我有一张滚动图像/链接的表格，我希望能够使用精灵，但出于某种原因，当代码仅显示一半的图像显示时。

如果有人想在野外查看，我的代码就在这里： 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;
}

这个代码看起来像我的代码看起来和工作的部分相同。如果有人能证明我哪里出错了，那么我就可以把头发拉出来。

谢谢

Answer 1

我怀疑这是因为类名以数字开头：

class="760Corner"

Valid class names must begin with a letter, underscore or hyphen

Answer 2

class / 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: ........;
}

我的一半CSS Sprite图像没有显示

2 个答案: