Не могу заставить работать CSS Sprite .. что я делаю не так?
Я использую Генератор спрайтов CSS для создания спрайтов для веб-страницы, над которой я работаю, но, похоже, это не работает, и я не знаю почему ... Я думаю, это что-то очевидное, но ...!
Итак, я взял 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
Правило .sprite-bg для background-position, установленное как часть составного правила для background (часть top left), имеет более высокий приоритет, чем автономный параметр background-position для .sprite-3, поскольку он появляется позже в таблице стилей.
Поместите правило для .sprite-bg первым.
Определите ширину и высоту для <div class = "sprite-bg sprite-3">.
div пуст. положить что-нибудь внутрь. как космос ( ).
Хм, не совсем понимаю, чего вы здесь пытаетесь достичь. Мультиклассирование кажется немного запутанным. Я разместил свой метод создания спрайтов ниже, посмотрите, подходит ли он вам. Обычно это включает в себя комбинацию элементов, наиболее распространенным из которых является неупорядоченный список со ссылками для навигации, но для этой цели это просто div.
Также не забывайте о порядке фона. фоновая позиция: | вверху | | слева |;
Это меня пару раз облажало. Наконец, в 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>
Я бы счел лишние div хуже, чем мультиклассирование ... Мультиклассирование отлично подходит для удаления дубликатов.
Не используйте генератор. Найдите время, чтобы сделать это самостоятельно с нуля. Тогда в следующий раз, когда вы воспользуетесь этим методом, вы будете знать, что искать, когда что-то пошло не так, и вы ответите на свой вопрос, и, черт возьми, может быть, кто-то еще находится в Stack Overflow.
Этот генератор не производит никаких значимых имен классов для ваших стилей, а это означает, что если вы перейдете к их редактированию позже, вы не узнаете, что происходит в двух классах со вторника, если вы не запомните числа. Значимые имена избавят вас от головной боли, когда вы позже вернетесь к своей таблице стилей.
Откройте Photoshop, GIMP или почти любое современное программное обеспечение для редактирования изображений. Убедитесь, что в вашей программе включена опция линейки, и таким образом измерьте координаты фонового изображения вашего элемента. При отсутствии линейок - что, вероятно, является редкостью, вы всегда можете поиграть с расширением MeasureIt Firefox и открытием .png во вкладке.
Как уже упоминалось, ваш элемент 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 в таблице стилей.
По какой-то причине Firefox 3 иногда требует 2 класса в селекторе CSS, чтобы карта спрайтов работала. Я догадываюсь, что правила специфичности вызывают проблемы при загрузке карты спрайтов. Добавив дополнительный класс, он работает правильно.
/* Bad */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }
Всегда хорошо «пространство имен» вашего 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: ­ is invisible when a hyperlink
is wrapped around it.   is not... it creates an
underscored hyperlink. Use ­ which is a soft-hyphen.
-->
</div>
</body>
</html>
Этот код работает в: IE 7, Firefox 3, Google Chrome 1, Opera 9 и Safari 3.
Совет. Если в URL-адресе не указано http: //, то карта спрайтов будет обслуживаться как из соединений http: //, так и https: //.
(Прокрутите вправо, чтобы увидеть «no-repeat scroll 0 0;»)
Вы должны объявить height и width для элемента div. Вот и все.
Дуг прав. Вы можете выявить подобные проблемы, используя инструменты разработчика вашего браузера. В Windows, Firefox, IE и Chrome F12 используется как горячая клавиша для вызова инструментов разработчика.