在带有文本的按钮内有一个精灵图像

Question

我试图创建一个按钮，到目前为止这里是demo。

现在我无法弄清楚如何定位精灵图像，以便只显示黑色图标。

有谁知道如何解决这个问题？

这是我想用按钮实现的目标：

没有悬停：

悬停：

这是我的代码：

HTML：

<a class="top-language" href="#" alt="Choose your language">Language</a>

CSS：

.top-language {
  border: 1px solid #ddd;
  padding: 5px;
  text-decoration: none;
  color: #000;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  padding-right: 10px;
  padding-left: 35px;
  background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}


 .top-language:hover {
  background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;   
}

Answer 1

这会奏效。这是jsfiddle

.top-language {
    border: 1px solid #ddd;
    width: 100px;
    color: #202020;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    font-weight: bold;
    font-size: 13px;  
    width: 80px;
    margin: 0;
    line-height: 22px;
    text-align: right;
    text-decoration: none;        
    background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
    }


.top-language:hover {
    background-position: bottom left;
    color: #d13030;  
    }

Answer 2

你可以：

一个。减少按钮的高度;

湾增加图像本身中两个精灵之间的垂直间隙;

℃。 background：url（...）no-repeat 0 2px;调整值以推出红色图标

Answer 3

.top-language {
  display: block;
  width: 22px;
  height: 22px;
  font-size: 13px;
  background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
  text-indent: -99999px;
}


.top-language:hover {
  background-position: 0 0;  
}

Answer 4

您可以按如下方式提供图像显示位置：

display:inline-block