在一個帶有文本的按鈕內部有一個精靈圖像

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

您可以：

一個。減少按鈕的高度;

b。增加圖像中兩個精靈之間的垂直間隙;

c。背景：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