Научите выводить с помощью 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]

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

инвестиции

Новые темы	Объявления	Свободное общение
16:04 LGaming - экосистема и партнерская программа в gambling и betting вертикалях 11:48 Google - шантажист, а Cloudflare - не спаситель. Как не отлететь в бан 11:47 Старые кости или свежее мясо? Как нагнуть старичка в серпе за один год 11:45 10.02 Яндекс штормит, а Google лезет в долги: 15 миллиардов на железки для ИИ 20:18 ЕС душит ТикТок: прощай бесконечная лента и RPM? Что с монетизацией? 20:14 Гугл пухнет от кеша, а нам - крошки. Разбор $114 млрд: Адсенс в минусе, Ютуб на подписках 20:11 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ?	02:11 Crypto Mixer ↔ Bitcoin Mixer ↔ Cryptocurrency tumbler ↔ No-AML 20:15 Nexulume.com Обменник без AML и KYC 17:47 Продажа аккаунтов HH.RU 17:06 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 16:53 Мобильные и Резидентные Прокси Для Соц Сетей \| 3 Гб Бесплатно 12:59 Mixmasters - Exchange without AML and KYC 09:05 Swapwatch.org — Мониторинг криптовалютных обменников	01:00 Точные прогнозы на футбол 21:50 Кулеры и БП станут золотыми? Медь по 13 штук, олово в космосе 21:25 блокировка youtube 2026: ркн начинает «выдавливание». кто уже пробовал вк видео? 20:54 Туалетные секреты: Замурчательная тема 17:44 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес 15:24 Сайты Рунета 15:22 Moltbook: Соцсеть для ботов, где людям закрыли рот. Началось?

Новые темы

Объявления

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

16:04 LGaming - экосистема и партнерская программа в gambling и betting вертикалях
11:48 Google - шантажист, а Cloudflare - не спаситель. Как не отлететь в бан
11:47 Старые кости или свежее мясо? Как нагнуть старичка в серпе за один год
11:45 10.02 Яндекс штормит, а Google лезет в долги: 15 миллиардов на железки для ИИ
20:18 ЕС душит ТикТок: прощай бесконечная лента и RPM? Что с монетизацией?
20:14 Гугл пухнет от кеша, а нам - крошки. Разбор $114 млрд: Адсенс в минусе, Ютуб на подписках
20:11 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ?

02:11 Crypto Mixer ↔ Bitcoin Mixer ↔ Cryptocurrency tumbler ↔ No-AML
20:15 Nexulume.com Обменник без AML и KYC
17:47 Продажа аккаунтов HH.RU
17:06 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust
16:53 Мобильные и Резидентные Прокси Для Соц Сетей | 3 Гб Бесплатно
12:59 Mixmasters - Exchange without AML and KYC
09:05 Swapwatch.org — Мониторинг криптовалютных обменников

01:00 Точные прогнозы на футбол
21:50 Кулеры и БП станут золотыми? Медь по 13 штук, олово в космосе
21:25 блокировка youtube 2026: ркн начинает «выдавливание». кто уже пробовал вк видео?
20:54 Туалетные секреты: Замурчательная тема
17:44 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес
15:24 Сайты Рунета
15:22 Moltbook: Соцсеть для ботов, где людям закрыли рот. Началось?