Научите выводить с помощью CSS изображения из одного графического файла.

Сообщений: 3448 Регистрация: Май 2011

7 Марта 2014 21:07

Привет. В связи с необходимостью оптимизировать сайт хочу прибегнуть к возможностям CSS стилей.

Что надо - выводить картинки из одного файла. Понаблюдал за кодом некоторых сайтов. Вижу что используют следующее:
background-position: .......
background-image: url('xxxx');
background-repeat: no-repeat;
width: ....px;
height: ....px;

Кто объяснит или подкинет ссылку на толковое разъяснение? Спасибо.

Не подписываюсь на темы, так что не слежу за вопросами, которые вы оставляете в топике после меня. Если нужно получить ответ, пишите в ЛС с указанием ссылки на мой комментарий.

WSairus

Сообщений: 1432 Регистрация: Июн 2010

7 Марта 2014 21:13

Про все эти атрибуты и многие другие рекомендую почитать здесь: _htmlbook.ru/css/background. Вкратце
background-position - позиция смещения
background-image - адрес изображения (относительно css файла!!!)
background-repeat - повтор изображения по осям или не повтор (no-repeat)
width и height - к изображению не относятся, но задают размер текущего элемента.

Партнёрки для заработка!

Валентин

Сообщений: 621 Регистрация: Май 2010

7 Марта 2014 22:58

Цитата
Алик Яушев пишет: Что надо - выводить картинки из одного файла

все картинки собираются в один файл, потом он подгружается фоном, но не весь файл, а какое-то определенное место этого файла, потом при определенном действии (например, если навести мышку или кликнуть) фон сдвигается на другое место...
позиция фона определяется background-position, картинка-файл называется спрайтом

Цитата
Алик Яушев пишет: background-position: ....... background-image: url('xxxx'); background-repeat: no-repeat;

можно использовать сокращенную запись

Код
background: transparent url('fon.png') no-repeat scroll 0px 0px; [background-color] \| [background-image] \| [background-repeat] \| [background-attachment] \| [background-position]

в том месте, где пиксели - регулируется позиция фона - первая по-горизонтали, вторая по-вертикали

инвестиции

Новые темы	Объявления	Свободное общение
22:45 Всем привет! 19:37 Xrumer-полезный софт или нет? 17:26 AI под надзором. Минцифры готовят клеймо для контента 17:23 APK на паузе. Google убивает быстрый конверт 17:18 Яндекс-ап 20 марта и похороны ChatGPT, Claude и Gemini. Считаем убытки 15:02 Слипание слов в блоке 10:39 MAX попер в бурж: 40 стран, ведение каналов и горы дешевого трафика	17:24 Обменный Сервис - Купец (Kupec.cc) 15:52 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 14:06 Продвижение YouTube видео в топ поиска \| Любой тип контента \| Гарантия результата 14:06 №1 Рассылка / Инвайтинг [TELEGRAM] \| Приватный метод 14:06 Trustpilot Reviews \| Подниму рейтинг вашей компании 14:06 Установка\|Настройка\|Доработка\|Наполнение сайтов\|Дизайн\|3D\|Видеомонтаж 13:24 Мобильные и Резидентные Прокси Для Соц Сетей \| 3 Гб Бесплатно	01:42 Точные прогнозы на футбол 00:53 Сайты Рунета 21:59 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 21:22 молодильные яблоки и живая вода 08:52 Чак Норрис ушел - 19 марта 2026, 86 лет, семья подтвердила 20:23 Панель Кнопки соцсетей 14:03 Огородники

Новые темы

Объявления

Свободное общение

22:45 Всем привет!
19:37 Xrumer-полезный софт или нет?
17:26 AI под надзором. Минцифры готовят клеймо для контента
17:23 APK на паузе. Google убивает быстрый конверт
17:18 Яндекс-ап 20 марта и похороны ChatGPT, Claude и Gemini. Считаем убытки
15:02 Слипание слов в блоке
10:39 MAX попер в бурж: 40 стран, ведение каналов и горы дешевого трафика

01:42 Точные прогнозы на футбол
00:53 Сайты Рунета
21:59 8 марта: желаю аптайма 99.9% и e-e-a-t без локов
21:22 молодильные яблоки и живая вода
08:52 Чак Норрис ушел - 19 марта 2026, 86 лет, семья подтвердила
20:23 Панель Кнопки соцсетей
14:03 Огородники