Question

我正在尝试使用css sprites在图像的特定部分上移动一段文字。但我申请的背景位置似乎不起作用。我试过改变背景位置，但是文本部分（即twitter，google plus）没有移动到正确的位置。

<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和google plus放在位于图像中心部分的各自徽标上。我无法弄清楚我哪里出错了。请帮帮我。

Answer 1

你有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/

css精灵背景位置不起作用

1 个答案: