N background'ов в 1 изображении. - HTML и CSS

Lime · 09.07.2012, 01:14

Видел на сайтах такую схему:
Для фона/картинок на странице используется 1 изображение(файл), в котором и есть большинство картинок.

Для теста наваял нечто такое:

Код HTML:

<html>
<head>
<style type="text/css">
.bg1 {
	background-image: url("test1.gif");
	background-repeat: no-repeat;
	background-position: -15px -15px;
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
.bg2 {
	background-image: url("test1.gif");
	background-repeat: no-repeat;
	background-position: -15px -100px;
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
.bg3 {
	background-image: url("test1.gif");
	background-repeat: no-repeat;
	background-position: -95px -60px;
	border: 1px solid black;
	width: 100px;
	height: 100px;
}	
</style>
</head>
<body>

<div class="bg1">фон1</div><br />
<div class="bg2">фон2</div><br />
<div class="bg3">фон3</div><br />
<img src="test1.gif" width="175" height="176" alt="Image" style="border: 1px solid black;" />

</body>
</html>

И всё бы хорошо для div'ов чьи размеры будут совпадать с размерами частей изображений, а как быть с теми div'aми в которых требуется repeat-x / repeat-y ?

p.s. Делается вебинтерфейс для программы. Цель - сократить кол-во запросов (позже буду играться с кешированием).

Спасибо за отзывы!

Naive · 09.07.2012, 09:59

Можно делать 3 спрайта:
1 для статичных размеров изображений,
2 для повторяемых по вертикали,
3 для повторяемых по горизонтали.

Еще вариант - пихать в полную ширину/высоту спрайта повторяемое изображение, если размеры блоков позволяют.
Вот тут делал так, снизу repeat-x, справа вверху и по центру есть небольшие repeat-y.

Lime · 09.07.2012, 13:14

Цитата:

Сообщение от Naive

Можно делать 3 спрайта:
1 для статичных размеров изображений,
2 для повторяемых по вертикали,
3 для повторяемых по горизонтали.

Еще вариант - пихать в полную ширину/высоту спрайта повторяемое изображение, если размеры блоков позволяют.

Примерно так и сделал.
Статичные куски вместе с повторяемыми по вертикали запихнул в 1 файл, повторяемые по горизонтали (их мало) во 2рой файл.
Итого 2 файла вместо 17

В идеале конечно хотелось бы стредствами css (желательно < 3 версии) "вырезать" часть изображения и с ним уже работать, но как я понял так не получится

09.07.2012, 09:59	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Можно делать 3 спрайта: 1 для статичных размеров изображений, 2 для повторяемых по вертикали, 3 для повторяемых по горизонтали. Еще вариант - пихать в полную ширину/высоту спрайта повторяемое изображение, если размеры блоков позволяют. Вот тут делал так, снизу repeat-x, справа вверху и по центру есть небольшие repeat-y. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Прозрачный текст на Изображении	KWN, lnc	Общие вопросы Delphi	7	25.01.2011 12:24
ПОиск объекта на изображении	TacoBell	Qt и кроссплатформенное программирование С/С++	7	26.10.2010 13:47
Сколько квадратов на изображении?	artemavd	Общие вопросы Delphi	12	27.08.2010 09:10
Гиперссылка на изображении	Alex2009	HTML и CSS	5	03.05.2010 17:12
Изображения на изображении :)	nikleb	JavaScript, Ajax	6	24.11.2007 01:34