CSS Background Position не смещается - PullRequest
Новая
       30

CSS Background Position не смещается

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

эту проблему немного сложно объяснить.

Я использую спрайт PNG для создания значков размером 48x48 пикселей и смещения фона на класс.

Например, 

<style>

div.icon {
    width:48px;
    height:48px;
    background: url(../img/48sprite.png);
}

.cart { background-position: -96px -336px; }
.sale { background-position: -96px -384px; }
.bino { background-position: -96px -432px; }

</style>

(Существует еще около 35 таких классов смещения положения фона для разных значков.) 

<div class="widelist">

<div class="widelist-itemwrap">

<div class="icon bino left"></div>

  <div class="widelist-content left">
    <h4>Widelist Heading</h4>
    <p>Widelist content</p>
  </div>

</div>

</div>

Проблема в том, что независимо от того, поместил ли я bino, sale, cart или любые другие 36 значков в спрайте в качестве второго класса после класса Icon, я все равно просто получаю фоновое изображение, расположенное в 0px, 0px из файл PNG.

Странно то, что он отображается ОТЛИЧНО в Dreamweaver Design View, но как только я перехожу к Live View или предпросмотру в Chrome / Safari и т. Д., Все значки переключаются на значок по умолчанию, а не смещаются.

Инструменты разработчика в Chrome показывают, что свойство background-position было правильно смещено, но визуально значок неправильный.

Просто чтобы прояснить, я уже много раз успешно использовал эту технику без проблем - просто плохой день, я думаю.

Есть идеи?

1 Ответ

3 голосов
/ 11 апреля 2011

Проблема в том, что div.icon является более конкретным , чем .bino.

Правило background является сокращением для (среди прочего) свойства background-position, поэтомуСвойство background на div.icon не позволяет применять ваши отличающиеся правила background-position.

Вы можете исправить это, изменив div.icon на .icon.

...