Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Проблема со спрайтом

Проблема со спрайтом

     10.08.2013    css, спрайт, фон    Все вопросы » Стили (CSS)    2316

вопрос
Здравствуйте! У меня есть фон сайта (60x60, повторяется). Есть еще фон верхней навигации и фон сайдбаров. Все три картинки 60x60px. Объединяю в спрайты по горизонтали, без отступов. Как правильно прописать background-position.

Ответил: Sander

Спрайты применимы только для иконок и для заливки по горизонтали или вертикали.
Посредством четко заданных размеров формы и background-position можно четко задать фон для блока.

Пример, заливка фона кнопок, по горизонтали:
Проблема со спрайтом

Тут используются стили:
.aqua{background-position:0 0;}
    .aqua:hover{background-position:0 -28px;}
.blue{background-position:0 -56px;}
    .blue:hover{background-position:0 -84px;}


Пример 2, иконки:
Проблема со спрайтом

.orating_m{background-position:-12px 0;}
    .orating_m:hover{background-position:-12px -12px;}
    .orating_m.orated{background-position:-12px -24px;}
.orating_p{background-position:0 0;}
    .orating_p:hover{background-position:0 -12px;}
    .orating_p.orated{background-position:0 -24px;}


А вообще, RTFM
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 12.11.2011 snpwild  Стили (CSS)
 03.01.2012 Cold  Стили (CSS)
 04.07.2012 Lady  Стили (CSS)
 07.12.2012 stsepelin  Стили (CSS)
 17.03.2013 bob  Стили (CSS)
 22.06.2013 Uralbox  Шаблоны (TPL), Стили (CSS), Хаки
 14.08.2013 tashkevski  Общие вопросы по вёрстке, Стили (CSS)
 08.09.2013 sergey.gusak90  Стили (CSS), jQuery, Общие вопросы по PHP
 09.09.2013 Gopr  Общие вопросы по вёрстке, Стили (CSS)
 30.11.2013 Мила  Шаблоны (TPL), Стили (CSS)
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    Сегодня, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:37
    т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
    Видосы в директории upload можно хоть оставить? их там 80 Гб
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:17
    фтп обычный юзер а не root
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:15
    дэк только так и загружаю
  • Gordi | Как реализовать шифрование трафика? 3
    Фото Gordi
    Gordi
    Как реализовать шифрование трафика?
    18-11-2024, 14:14
    я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:13
    Gordi,
    через фтп загружай
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:11
    Привет Николай!
    Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
    или направь на путь истинный, пжст
наверх