C, PHP, VB, .NET

Дневникът на Филип Петров


* Фонове

Публикувано на 27 август 2009 в раздел ХHTML.

Досега показахме как можем да сменяме цвета на текста, който пишем. Сега ще погледнем възможностите за създаване на фон зад текст и на различни обекти.

1. Фонов цвят на полета:

<p style="background-color:yellow">
	Текст на жълт фон
	<span style="background-color:pink">
		с вмъкнат текст на розов фон
	</span>.
	Самият текст по подразбиране е черен.
</p>

Резултат:

Текст на жълт фон с вмъкнат текст на розов фон . Самият текст по подразбиране е черен.

2. Фонов цвят за таблици:

<table border="1" style="background-color:pink">
<caption>Примерна таблица</caption>
<thead>
	<tr>
		<th>Колона 1</th>
		<th>Колона 2</th>
	</tr>
</thead>

<tbody>
	<tr style="background-color:green">
		<td>Зелен</td>
		<td>ред</td>
	</tr>
	<tr>
		<td>12</td>
		<td style="background-color:grey">сива клетка</td>
	</tr>
	<tr>
		<td>13</td>
		<td>23</td>
	</tr>
</tbody>
</table>

Резултат:

Розова таблица
Колона 1 Колона 2
Зелен ред
12 сива клетка
13 23

3. Фонова картинка: Нека разгледаме следната картинка:

фонова картинка
Тя се намира на адрес: https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg
Ще я използваме като фон на:

a) Параграфи и други полета:

<p style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg);
		  color:darkblue; font-weight:bold">
	Това е пример за параграф, чийто фон е картинка. Можете да използвате широк
        формат от изображения - jpg, gif, png, bmp и др.
</p>

Резултат:

Това е пример за параграф, чийто фон е картинка. Можете да използвате широк формат от изображения - jpg, gif, png, bmp и др.

б) Фон на таблица:

<table border="1"
style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg">
<caption>Примерна таблица</caption>
<thead>
	<tr>
		<th>Колона 1</th>
		<th>Колона 2</th>
	</tr>
</thead>

<tbody>
	<tr>
		<td>11</td>
		<td>21</td>
	</tr>
	<tr>
		<td>12</td>
		<td>22</td>
	</tr>
</tbody>
</table>

Резултат:

Примерна таблица
Колона 1 Колона 2
11 21
12 22

в) Фон на ред от таблица:

<table border="1">
<caption>Примерна таблица</caption>
<thead>
	<tr style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg">
		<th>Колона 1</th>
		<th>Колона 2</th>
	</tr>
</thead>

<tbody>
	<tr>
		<td>11</td>
		<td>21</td>
	</tr>
	<tr>
		<td>12</td>
		<td>22</td>
	</tr>
</tbody>
</table>

Резултат:

Примерна таблица
Колона 1 Колона 2
11 21
12 22

Аналогично може да се постави картинка и като фон на отделна клетка.

4. Фон на цялата страница: Можете да направите фон и на цялата страница, като поставите стила в таг <body>. Важат както стиловете background-color, така и background-image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Форматиране на текст и картинки</title>
	</head>
	<body style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg)">

		<p style="background-color:white">
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		</p>
	</body>
</html>

Резултат:

Фонова картинка на цяла страница

5. Повторения: Чрез стил background-repeat можете да дефинирате споменатия по-горе "tile". Възможностите са:

a) no-repeat: без повторение

	<body style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg);
				background-repeat:no-repeat">

		<p style="background-color:white">
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		</p>
	</body>

Резултат:
Фонова картинка без повторение

б) repeat-x: повторение по хоризонтала:

	<body style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg);
				background-repeat:repeat-x">

		<p style="background-color:white">
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		</p>
	</body>

Резултат:
Фонова картинка с повторение по хоризонтала

в) repeat-y: повторение по вертикала:

	<body style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg);
				background-repeat:repeat-y">

		<p style="background-color:white">
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		</p>
	</body>

Фонова картинка с повторение по вертикала

г) repeat: по подразбиране - повтаря и по вертикала и по хоризонтала.

6. Местене на фон: Чрез стил background-attachment може да променя начинът, по който фонът се държи при преминаване на следваща страница (т.нар. scroll). Това се налага когато обектите и текстът на страницата излиза извън екрана на браузъра. Възможните стойности са scroll (по подразбиране - картинката е статична и се движи заедно с текста) и fixed (картинката стои статично на екрана и текста и обектите се движат върху нея.

7. Позициониране: Можем да позиционираме фоновата картинка чрез стил background-position. Той приема два параметъра - val1 и val2. Първият параметър отговаря за позиционирането по хоризонтала. Възможните параметри са left, center, right, брой пиксели или проценти. Вторият параметър отговаря за позиционирането по вертикала. Възможните стойности за val1 са top, center, bottom, брой пиксели или проценти.

Пример 1: Фонова картинка позиционирана долу в средата:

	<body style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg);
				background-repeat:no-repeat;
				background-position:center bottom">

		<p>
			FreeBSD® is an advanced operating system for modern server,
			desktop, and embedded computer platforms. FreeBSD's code base
			has undergone over thirty years of continuous development,
			improvement, and optimization. It is developed and maintained
			by a large team of individuals. FreeBSD provides advanced
			networking, impressive security features, and world class
			performance and is used by some of the world's busiest web
			sites and most pervasive embedded networking and storage devices.
		</p>
	</body>

Резултат:

Фонова картинка позиционирана долу в средата

Виждате, че това позициониране е спрямо обектите на екрана, а не самия екран на браузъра!

Пример 2: Картинка позиционирана на 20% по хоризонтала и 80% по вертикала:

	<body style="background-image:url(https://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg);
				background-repeat:no-repeat;
				background-position:20% 80%">

		<p>
			FreeBSD® is an advanced operating system for modern server,
			desktop, and embedded computer platforms. FreeBSD's code base
			has undergone over thirty years of continuous development,
			improvement, and optimization. It is developed and maintained
			by a large team of individuals. FreeBSD provides advanced
			networking, impressive security features, and world class
			performance and is used by some of the world's busiest web
			sites and most pervasive embedded networking and storage devices.
		</p>
	</body>

Фонова картинка позиционирана на 20 и 80 процента

 



Добави коментар

Адресът на електронната поща няма да се публикува


*