0

我已经尝试了很多东西，我无法弄清楚为什么精灵没有出现。按钮有 3 种状态：正常、悬停和活动。

#continue_btn {
    float: right;
    margin-right: 15px;
    width: auto;
    width: 229px;
    height: 43px;
    background-image:url(_img/continue_btn.png);
    background-repeat: no-repeat; 
    float: none;
    margin-left: -23px;
    margin-bottom: 12px;
    border-radius: 8px;    
    }
#continue_btn a{
    background: url(_img/button_sprite.png) 0 0 no-repeat -13px -11px;
    width: 229px;
    height: 43px;
}

continue_btn a:hover {
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -58px;
    width: 229px;
    height: 43px;
}
continue_btn a:active {
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -106px;
    width: 229px;
    height: 43px;
}

你可以在这里看到它（点击左上角的用户输入按钮）。这是精灵。

4

1 回答 1

1

首先，您忘记了最后两个声明中的前导哈希。

其次，在您的 html#continue_btn中是输入元素，但是在您的 css 中，您为一些嵌套a标签定义了背景，这些标签在您的输入字段中不存在（并且不能，因为输入不是块而是内联元素）。

第三，我应该删除属性中的奇怪0 0声明background，它不适合方案。

第四，_img/button_sprite.png指向错误的方向。您的案例的网址是../_img/button_sprite.png.

最后，我认为你需要这样的东西：

#continue_btn {
    background: url(../_img/button_sprite.png) no-repeat -13px -11px;
    width: 229px;
    height: 43px;
}

#continue_btn:hover {
    background: url(../_img/button_sprite.png) no-repeat -14px -58px;
    width: 229px;
    height: 43px;
}
#continue_btn:active {
    background: url(../_img/button_sprite.png) no-repeat -14px -106px;
    width: 229px;
    height: 43px;
}
于 2012-12-15T19:27:59.440 回答