Проблема создания спрайтов фонового изображения CSS с абсолютным позиционированием - PullRequest
Новая
       14

Проблема создания спрайтов фонового изображения CSS с абсолютным позиционированием

1 голос
/ 04 апреля 2011

У меня есть 2 изображения, которые я хотел бы использовать в качестве ссылок с эффектом наведения. Повсюду изображения и изображения Hoverover существуют в одном файле PNG.

Проблема, с которой я столкнулся, заключается в том, что первое изображение работает просто отлично, но второе изображение отображается как с изображением наведения, начинающимся сверху: 0, так и с изображением, которое я хочу видеть непосредственно под ним. Если я изменю #MCD a{ на #MCD{, изображение будет отображаться правильно, но все функции связывания изображения исчезнут.

HTML 

<ul id="sites">
<li id="LL"><a href="" /></li>
<li id="MCD"><a href="" /></li>
</ul>

CSS 

#sites{
position:absolute;
margin:0;
padding:0;
top:250px;
left:700px;
width:500px;
background:transparent;
display:block;
}

#sites li{
position:absolute;
list-style:none;
right:0;
}

#LL a{
display:block;
width:442px;
height:43px;
background:url(sitesprites.png) 0 0;
}

#LL a:hover{
background:url(sitesprites.png) 0 -44px;
}

Отредактировано в соответствии с полученными мною ответами 

#MCD a{
position:absolute;
display:block;
right:0;
top:78px;
width:384px;
height:54px;
background:url(sitesprites.png) left -88px;
}

#MCD a:hover{
background-position:left -143px;
}

Вот jsFiddle: http://jsfiddle.net/lipestyle/77a2z/

1 Ответ

0 голосов
/ 04 апреля 2011

Без вашего HTML я не уверен, какая именно у вас проблема, за исключением того, что наведение не работает правильно.

Как сказал Пойнти, для того, чтобы top и right работали, вы должны объявить элемент как абсолютное положение (что удалит его из потока страницы.)

Кроме того, как ваши png сделаны? На картинке поверх другого или рядом? Синтаксис для фоновой позиции сначала горизонтальный, а затем вертикальный. (вид назад.) Большинство браузеров будут анализировать синтаксис в обратном направлении (background-position: top center;), если вы используете верхний, нижний, левый, правый или центральный. Но при использовании чисел они должны быть в правильном порядке.

Твои цифры выглядят немного странно. Обычно спрайты css выполняются вертикально и позиционируются background-position: top;, а затем перемещаются на <a> (что составляет половину от общей высоты PNG) вниз при наведении.

Предполагая, что высота вашего <a> равна половине высоты изображения PNG, а ваши PNG вертикальные, попробуйте что-то вроде этого: 

#MCD a{
  display: block; 
  width:384px;
  height:54px;
  background:url(sitesprites.png) left top;
}

#MCD a:hover{
  background-position: left -54px; /* just use background position instead of redefining the image */
}

просто нет, вы всегда должны использовать свои css-спрайты для элемента <a>.

...