CSS/Фон: различия между версиями
Oleg4280 (обсуждение | вклад) Новая страница: «== Свойства, которые устанавливают фон элемента: == === background === Это универсальное свойство…» |
Oleg4280 (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
Свойства, которые устанавливают фон элемента: |
|||
* <code>background</code> |
|||
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства. |
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства. |
||
* <code>background-attachment</code> |
|||
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed). |
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed). |
||
* <code>background-color</code> |
|||
Устанавливает [[CSS/Цвет|цвет]] фона, который будет виден, если не задано фоновое изображение. |
Устанавливает [[CSS/Цвет|цвет]] фона, который будет виден, если не задано фоновое изображение. |
||
* <code>background-image</code> |
|||
Определяет изображение, которое будет использоваться в качестве фона. |
Определяет изображение, которое будет использоваться в качестве фона. |
||
* <code>background-position</code> |
|||
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы. |
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы. |
||
* <code>background-repeat</code> |
|||
Способ повторения изображения. |
Способ повторения изображения. |
||
Строка 42: | Строка 42: | ||
== Примеры: == |
== Примеры: == |
||
Подробная форма записи |
Подробная форма записи: |
||
<source lang="css"> |
<source lang="css"> |
||
Строка 58: | Строка 58: | ||
</source> |
</source> |
||
Сокращённая форма записи |
Сокращённая форма записи: |
||
<source lang="css"> |
<source lang="css"> |
||
Строка 70: | Строка 70: | ||
</source> |
</source> |
||
{{BookCat}} |
|||
[[Категория:CSS]] |
|||
[[en:Cascading_Style_Sheets/Background]] |
Версия от 11:59, 10 мая 2014
Свойства, которые устанавливают фон элемента:
background
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства.
background-attachment
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed).
background-color
Устанавливает цвет фона, который будет виден, если не задано фоновое изображение.
background-image
Определяет изображение, которое будет использоваться в качестве фона.
background-position
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы.
background-repeat
Способ повторения изображения.
Возможные значения:
- no-repeat — без повторения;
- repeat — с повторением; (значение по умолчанию)
- repeat-x — с повторением только по горизонтали;
- repeat-y — только по вертикали.
Ещё есть пара нестандартных свойств background-position-x
и background-position-y
, которые задают соответственно положение фонового изображения по горизонтали и вертикали.
В CSS3 также появились три новых свойства: background-clip
, background-origin
и background-size
.
Свойство background-clip
определяет область рисования фоновых изображений, а background-origin
— область позиционирования.
Свойство background-size
изменяет масштаб фонового изображения.
Примеры:
Подробная форма записи:
p {
background-color: #ccc;
}
body {
background-color: #8cf;
background-image: url(sea.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
Сокращённая форма записи:
p {
background-color: #ccc;
}
body {
background: #8cf url(sea.jpg) no-repeat fixed bottom;
}