css sprite background-position not working

-1

Я пытаюсь переместить часть текста на определенную часть изображения, используя css спрайты. Но положение фона, которое я применяю, похоже, не работает. Я попытался изменить положение фона, но текстовая часть (т. Е. Твиттер, google plus) не перемещается в нужное место.css sprite background-position not working

<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.

Я хочу, чтобы соответствующий текст, т. Е. Твиттер и google plus, размещался на соответствующих логотипах, расположенных на центральной части изображения. Я не могу понять, где я иду не так. Пожалуйста, помогите мне с этим.

источник

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 background-position not working

ответ

Смежные вопросы