CSS: background-position не работает - PullRequest
Новая
       41

CSS: background-position не работает

1 голос
/ 26 января 2012

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

HTML: 

<div id="topnav">
  <ul>
    <li id="nav-home"><a href="index.html">Feature Product<span></span></a></li>
    <li id="nav-all"><a href="shop_owners.html">All Products<span></span></a></li>
    <li id="nav-how"><a href="all_products.html">How It Works<span></span></a></li>
  </ul>
</div>

CSS: 

#topnav {
  position: relative;
  left: 150px;
  top: 100px;
  margin: 0;
  padding: 0;
  height: 50px;
}

#topnav ul {
  list-style-type: none;
  text-align: center;
  line-height: 50px;
}

#topnav ul li {
  float: left;
}

#topnav ul li a {
  background: url(../nav-bar-2.png);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  position: relative;
}

#nav-home {
  width: 200px;
}

#nav-all {
  width: 200px;
  background-position: -200 0px
}

#nav-how {
  width: 200px;
  background-position: -400px 0px
}

#topnav ul li a span {
  background: url(../nav-bar-2.png) no-repeat scroll bottom left;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 100;
}

#topnav li a span:hover {
  cursor: pointer;
}

#nav-home span {
  background-position: 0px -50px
}

#nav-all span {
  background-position: -200 -50px;
}

#nav-how span {
  background-position: -400 -50px;
}

Ответы [ 3 ]

3 голосов
/ 26 января 2012

Я думаю, что это проблема: 

#nav-home{width:200px;}
#nav-all{width:200px; background-position:-200 0px}
#nav-how{width:200px; background-position:-400px 0px}

Код для второго и третьего элементов перемещает фоновое изображение на 200 пикселей и 400 пикселей влево соответственно. Тем не менее, #nav-all и #nav-how не имеют фонового изображения, поскольку единственное место, которое вы установили, - это ссылка, а также ссылка и интервал внутри этих элементов li.

Попробуйте сделать это изменение: 

#topnav ul li {background:url(../nav-bar-2.png); // a was removed from end of list

Теперь, когда фоновое изображение находится на элементе li, имеющийся код css может переместить его на правильное количество пикселей влево. (Я почти всегда указываю, к какому тегу относится идентификатор в CSS, так как он может помочь решить эту проблему, по крайней мере, в непроизводственном коде. Это означает, что вы будете использовать li#nav-home и li#nav-all, чтобы помочь вам точно знать, к какому элементу относится идентификатор относится к).

Кроме того, не опускайте px для значений длины, которые должны быть в пикселях. Хотя некоторые браузеры используют px в качестве длины по умолчанию, гораздо лучше не полагаться на это поведение, а просто явно указывать единицу измерения как px. : D * * 1017

1 голос
/ 26 января 2012

Вы не указываете юнит. Просто -200 само по себе может значить много вещей. Используйте -200px.

0 голосов
/ 26 января 2012

Вы устанавливаете фоновое положение вашего LI тега, но вы помещаете фоновое изображение на что-то другое, span -тег, и у вас даже нет правильно сформированного SPAN tag.

...