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背景位置不起作用

回答

相关问题