* Фонове
Публикувано на 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>
Добави коментар