| Оплата и обучение |
Инспектор группы
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 3:
Параметры CSS для фона
Аннотация: На примерах подробно рассматривается синтаксис, методы и свойства задания фона.
Ключевые слова: css, Internet, 'background-repeat', 'background-attachment', 'background-position', w3c, параметр, CSS1, CSS2
Параметры CSS для фона определяют фоновые эффекты элемента.
Примеры
- Данный пример показывает, как задать фоновый цвет элемента.
<html> <head> <style type="text/css"> ul {background-color: rgb(200,10,200)} ol {background-color: #00FFFF} li {background-color: transparent} p {background-color: blue} </style> </head> <body> <ul> <li>this is ul</li> </ul> <ol> <li>this is ol</li> </ol> <p>This is a paragraph</p> </body> </html> - Данный пример показывает, как задать в качестве фона изображение.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg) } </style> </head> <body> В документе в качестве фона использовано изображение </body> </html> - Данный пример показывает, как использовать повторяющееся фоновое изображение.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat } </style> </head> <body> В документе в качестве фона использовано повторяющееся изображение </body> </html> - Данный пример показывает, как использовать
повторяющееся только по вертикали фоновое изображение.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat-y } </style> </head> <body> В документе в качестве фона использовано повторяющееся изображение, которое размножается только вертикально </body> </html> - Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat-x } </style> </head> <body> В документе в качестве фона использовано повторяющееся изображение, которое размножается только горизонтально. </body> </html> - Данный пример показывает, как разместить на странице фоновое изображение.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat; background-position: bottom; } </style> </head> <body> </body> </html> - Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> Определено фиксированное фоновое изображение<br> Определено фиксированное фоновое изображение<br> Определено фиксированное фоновое изображение<br> </body> </html> - Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.
<html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: no-repeat; background-attachment: scroll } </style> </head> <body> Определено прокручивающееся фоновое изображение<br> Определено прокручивающееся фоновое изображение<br> Определено прокручивающееся фоновое изображение<br> </body> </html> - Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
<html> <head> <style type="text/css"> body { background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center; } </style> </head> <body> Это документ, для которого свойства фона заданы в одном объявлении<br> Это документ, для которого свойства фона заданы в одном объявлении<br> Это документ, для которого свойства фона заданы в одном объявлении<br> </body> </html>
Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
