Jump to content
  • 0

Раскройка Бекграунда.

Lacosta

Asked by Lacosta,

 Share

Question

Lacosta Explorer

Lacosta

Posted
Posted

Привет народ, есть такой вопрос: можно ли задавать ЧАСТИ изображения её положение в Бекгроунде?.. Так косноязычно получилось :)

В общем проиллюстрирую:

Есть такая картинка квадрат: Рисунок.1

Это цельная, не резаная картинка.

866564.jpg

Можно ли её както разделить с помощью CSS, чтобы получился вот такой эфект Бекгроаунд? : Рисунок.2

867588.jpg

Хотелось бы такое реализовать, изза желания в разных углах одного блока, использовать разные элементы оформления.

Если предварительно нарисовать всё на одном изображении.

Поделитесь идеями народ! :)

P.s. не дорисовал до конца repeat-x/y, чтобы было нагляднее.

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
Привет народ, есть такой вопрос: можно ли задавать ЧАСТИ изображения её положение в Бекгроунде?.. Так косноязычно получилось :)

В общем проиллюстрирую:

Есть такая картинка квадрат: Рисунок.1

Это цельная, не резаная картинка.

866564.jpg

Можно ли её както разделить с помощью CSS, чтобы получился вот такой эфект Бекгроаунд? : Рисунок.2

867588.jpg

Хотелось бы такое реализовать, изза желания в разных углах одного блока, использовать разные элементы оформления.

Если предварительно нарисовать всё на одном изображении.

Поделитесь идеями народ! :)

P.s. не дорисовал до конца repeat-x/y, чтобы было нагляднее.

То что ты хочешь это геморно и долго заморачиватся, в твоём случае есть намного удобнее способ: Цельную картинку(спрайт) нужно сделать не кругом, а просто полоской вертикальной, где подряд будут идти цифры или закруглённые углы, вобщем всё что хочешь. Как пример: http://psywalker.ru/SAITS/Himik/img/red_block.jpg - тут полоска имеет в арсенале картинки нескольких разных углов.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Псиволкер чтож с ним делать?

Покажи как с этой полоской работать.

То есть код я тоже не совсем себе представляю.

Вот тебе другой наглядный пример:

1) Код: 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Закруглённые Углы</title>
<style type="text/css">
	*{ margin:0; padding: 0;}
	body { background: #000;}

		div.box { width: 50%; margin: 20px auto; background: #333; text-align: center; color: #fff;}
			div.box em, div.box em b { 
				background: url(s.gif) no-repeat;
				height: 11px;
				display: block;

			}
			div.box em b { background-position: 100% -11px;}
			div.box em.btm { background-position: 0 -22px;}
			div.box em.btm b { background-position: 100% -33px;}
</style>
</head>

<body>
	<div class="box">
		<em class="top"><b></b></em>
		Зачем столько ненужных блоков и стилей Оля???
		<em class="btm"><b></b></em>

	</div>
</body>
</html>

2) Спрайт картинка: http://psywalker.ru/Forum/ugl/1/s.gif

3) Ссылка на пример: http://psywalker.ru/Forum/ugl/1/main.html

В этом примере Один рисунок (спрайт) содержит в себе Углы от трёх примеров сразу, я дал тока один из трёх примеров, поэтому спрайт длинее :)

Link to comment
Share on other sites
  • 0
Lacosta Explorer

Lacosta

Posted
  • Author
Posted

Спасибо! Но уважаемый Гуру... Как быть если надо нарисовать бордер 1 пиксель как показано в моём первом примере,собственно я такой вариант на форуме уже нашёл, но при попытке бордер поставить он рисовался поверх картинок :)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Спасибо! Но уважаемый Гуру... Как быть если надо нарисовать бордер 1 пиксель как показано в моём первом примере,собственно я такой вариант на форуме уже нашёл, но при попытке бордер поставить он рисовался поверх картинок :)

Не понял задачи? Тоесть нужен блок с закруглёнными углами и бордером вокруг?

Покажи скрин того, что должно получиться в итоге

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Вот так надо бы. (кликабельно)

865552m.jpg

а получается вот так:

859408m.jpg

Так опятьже нет проблем, добавляем несколько правил и получаем результат: :)

1) Код: 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Закруглённые Углы</title>
<style type="text/css">
	*{ margin:0; padding: 0;}

		div.box { width: 50%; margin: 20px auto; background: #fde3f1; text-align: center; border: 2px solid #ddc1cf;}
			div.box em, div.box em b {
				background: url(sprite.jpg) no-repeat;
				height: 19px;
				display: block;
				position: relative;

			}
			div.box em { left: -2px; top: -2px;}
			div.box em b { background-position: 100% -19px; left: 4px; }
			div.box em.btm { background-position: 0 -38px; top: 2px;}
			div.box em.btm b { background-position: 100% -57px;}
</style>
</head>

<body>
	<div class="box">
		<em class="top"><b></b></em>
			Вот и всё, ничего сложного :)
		<em class="btm"><b></b></em>

	</div>
</body>
</html>

2) Спрайт: http://psywalker.ru/Forum/box2/sprite.jpg

3) Ссылка на пример: http://psywalker.ru/Forum/box2/main.html

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept