Не могу заставить CSS Sprite работать .. что я делаю не так? - PullRequest
Новая
       12

Не могу заставить CSS Sprite работать .. что я делаю не так?

2 голосов
/ 31 декабря 2008

Я использую CSS Sprite Generator для создания спрайтов для веб-страницы, над которой я работаю, но она, похоже, не работает, и я не знаю почему ... Я думаю, это что-то очевидно, но ..!

Итак, я взял 3 изображения, сжал, сгенерировал файл PNG (я проверил результат, кажется, он в порядке), и я вернул следующие классы CSS: 

.sprite-welcom1 { background-position: 0 -30px; } 
.sprite-welcom3 { background-position: 0 -109px; } 
.sprite-3 { background-position: 0 -188px; }

Итак, вот HTML-код, на котором я тестирую, и по какой-то причине все, что я получаю, это хорошая пустая страница: 

<html>
<head>
    <style>
    .sprite-welcom1 { background-position: 0 -30px; } 
    .sprite-welcom3 { background-position: 0 -109px; } 
    .sprite-3 { background-position: 0 -188px; } 

    .sprite-bg {
       background: url(csg-495a902b04181.png) no-repeat top left;
    }
    </style>
</head>
<body>
    <div class="sprite-bg sprite-3"></div>
</body>
</html>

Какие-нибудь советы?

Ответы [ 8 ]

8 голосов
/ 02 января 2009

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

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

Откройте Photoshop, GIMP или почти любое современное программное обеспечение для редактирования изображений. Убедитесь, что в вашей программе включена опция линейки, и таким образом измерьте координаты фонового изображения вашего элемента. В отсутствие линейки - что, вероятно, является редкостью, вы всегда можете обмануться с расширением MeasureIt Firefox и открытием .png на вкладке.

4 голосов
/ 31 декабря 2008

Определить ширину и высоту для <div class="sprite-bg sprite-3">.

3 голосов
/ 31 декабря 2008

Ваше правило .sprite-bg для background-position, установленное как часть составного правила для background (часть top left), имеет более высокий приоритет, чем автономная настройка background-position для .sprite-3, поскольку оно появится позже в таблице стилей.

Поместите правило для .sprite-bg первым.

2 голосов
/ 21 июля 2011

Вы должны объявить height и width для элемента div. Вот и все.

2 голосов
/ 31 декабря 2008

div пуст. положить что-нибудь внутрь. как пробел (&nbsp;).

1 голос
/ 31 декабря 2008

Хм, не совсем уверен, чего вы здесь добиваетесь. Мультиклассирование кажется немного грязным. Я разместил свой метод спрайт-карт ниже, посмотрите, делает ли это то, что вам нужно. Обычно это включает в себя комбинацию элементов, наиболее распространенным из которых является неупорядоченный список со ссылками для навигации, но для этого это просто div.

Также не забывайте порядок background-position. background-position: | top | | Влево |;

Это облажалось мне пару раз. Наконец, у A List Apart есть отличная статья о Sprite Maps (http://www.alistapart.com/articles/sprites/)

<html>
<head>
    <style>
    .sprite-container div {
       background: url(csg-495a902b04181.png) top left no-repeat;
       width: 20px; //width is neccessary
       height: 20px; //height is neccessary
    }

    .sprite-3 { background-position: 0 -188px; } 
    .sprite-4 { background-position: -20px -188px; }

    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div>
      <div class="sprite-4"></div>
    </div>
</body>
</html>
0 голосов
/ 06 февраля 2009

По какой-то причине Firefox 3 иногда хочет, чтобы в селекторе CSS было 2 класса, чтобы заставить работать карту спрайтов. Я догадываюсь, что правила специфичности вызывают проблемы, пока загружается спрайт-карта. При добавлении дополнительного класса он работает правильно. 

/* Bad  */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }

Всегда хорошо & ldquo; namespace & rdquo; Ваш CSS с parentClass, чтобы избежать неожиданного стиля тега DOM где-нибудь еще. Вот несколько дополнительных улучшений для всех идей сверху. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    .sprite-container div {
       background: transparent url(//www.yourDomain.com/csg-495a902b04181.png) no-repeat scroll 0 0;
       width: 200px; /* width is necessary */
       height: 20px; /* height is necessary */
    }
    .sprite-container .sprite-3 { background-position: 0 -188px; } 
    .sprite-container .sprite-4 { background-position: -20px -188px; }
    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div> 
      <div class="sprite-4"></div> 
      <!-- Empty divs are fine! Unless you *really* want text on top of
           your sprite map. :o) Btw: &shy; is invisible when a hyperlink
           is wrapped around it. &nbsp is not... it creates an 
           underscored hyperlink. Use &shy; which is a soft-hyphen.
       -->
    </div>
</body>
</html>

Этот код работает в: IE 7, Firefox 3, Google Chrome 1, Opera 9 и Safari 3.

Подсказка. Если вы не укажете http: // в URL-адресе, карта спрайтов будет обслуживаться как из соединений http: //, так и из https: //.

(Прокрутите вправо, чтобы увидеть & ldquo; no-repeat scroll 0 0; & rdquo;)

0 голосов
/ 20 января 2009

Как уже упоминали другие, ваш элемент sprite-bg должен иметь некоторый контент, чтобы задать ему высоту / ширину, или иметь те свойства, которые указаны в css, таким образом: 

.sprite-bg {
  background: url(csg-495a902b04181.png) no-repeat top left;
  width: 100px; /* (or whatever the width should be) */
  height: 100px; /* (or whatever the height should be) */
}

Как уже упоминал кто-то другой, я бы перенес правила для .sprite-welcom1, .sprite-welcom3 и .sprite-3 под основной .sprite-bg в таблице стилей.

...