Question

我已经尝试了很多东西，我无法弄清楚为什么精灵没有出现。按钮有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;
}

You can see it here（点击左上角的用户输入按钮）。 This is the sprite

Answer 1

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

其次，在您的html #continue_btn中是输入元素，但是在您的CSS中，您为某些嵌套的a标记定义了背景，但没有（并且不能，因为输入不是{{3但是block元素）存在于输入字段中。

第三，我应该删除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;
}

精灵出现在按钮上的问题

1 个答案: