css sprite背景位置不起作用

-1

我想移動一段文字使用css sprites.But圖像的特定部分，但我應用的背景位置似乎不工作。我試圖改變背景位置，但文本部分（即Twitter，谷歌加）不會移動到正確的位置。css sprite背景位置不起作用

的<body>代碼如下：

<div class="container"> 
<a class="Twitter" href="http://twitter.com/">twitter</a> 
<a class="Plus" href="http://plus.google.com/">google plus</a> 
</div>

的CSS是如下：

.container 
{ 
background: url('http://i.imgur.com/s5rf9GY.png') no-repeat; height: 30px; 
width:1247px;  
background-color:#444444; 
} 

.container .Twitter 
{ 
background-position: -627px 0; 
} 
.container .Plus 
{ 
background-position: -655px 0; 
}

小提琴位於here。

我希望各自的文字，即Twitter和谷歌加在他們各自的標誌位於圖像的中心部分。我無法弄清楚我哪裏會出錯。請幫助我。

來源

2014-05-07 user3575278

你有你CSS有點搞砸了。你有容器的背景，而不是錨。

.container 
{ 
    width:1247px; 
    height:30px;  
    background-color:#444444; 
} 

.container a 
{ 
    background: transparent url('http://i.imgur.com/s5rf9GY.png') no-repeat; 
    height: 30px; 
    width:30px; 
    display:block; 
    float:left; 
    text-indent:-9999px 
} 

.container .Twitter 
{ 
    background-position: -491px 0; 
} 

.container .Plus 
{ 
    background-position: -527px 0; 
}

檢查小提琴http://jsfiddle.net/Tn4F4/3/

來源

2014-05-07 10:22:13 Alex

好，謝謝......現在得到它。 – user3575278

css sprite背景位置不起作用

回答

相關問題