CSS/Фон: различия между версиями
Oleg4280 (обсуждение | вклад) Нет описания правки |
Oleg4280 (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
== Свойства == |
|||
Свойства, которые устанавливают фон элемента: |
Свойства, которые устанавливают фон элемента: |
||
=== background === |
|||
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства. |
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства. |
||
=== background-attachment === |
|||
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed). |
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed). |
||
=== background-color === |
|||
Устанавливает [[CSS/Цвет|цвет]] фона, который будет виден, если не задано фоновое изображение. |
Устанавливает [[CSS/Цвет|цвет]] фона, который будет виден, если не задано фоновое изображение. |
||
=== background-image === |
|||
Определяет изображение, которое будет использоваться в качестве фона. |
Определяет изображение, которое будет использоваться в качестве фона. |
||
=== background-position === |
|||
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы. |
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы. |
||
⚫ | |||
⚫ | |||
⚫ | |||
Способ повторения изображения. |
Способ повторения изображения. |
||
Строка 32: | Строка 36: | ||
* repeat-y — только по вертикали. |
* repeat-y — только по вертикали. |
||
=== background-clip, background-origin и background-size === |
|||
⚫ | |||
В CSS3 также появились три новых свойства: <code>background-clip</code>, <code>background-origin</code> и <code>background-size</code>. |
В CSS3 также появились три новых свойства: <code>background-clip</code>, <code>background-origin</code> и <code>background-size</code>. |
||
Строка 40: | Строка 44: | ||
Свойство <code>background-size</code> изменяет масштаб фонового изображения. |
Свойство <code>background-size</code> изменяет масштаб фонового изображения. |
||
== Примеры |
== Примеры == |
||
Подробная форма записи: |
Подробная форма записи: |
Версия от 11:55, 25 мая 2014
Свойства
Свойства, которые устанавливают фон элемента:
background
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства.
background-attachment
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed).
background-color
Устанавливает цвет фона, который будет виден, если не задано фоновое изображение.
background-image
Определяет изображение, которое будет использоваться в качестве фона.
background-position
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы.
Ещё есть пара нестандартных свойств background-position-x
и background-position-y
, которые задают соответственно положение фонового изображения по горизонтали и вертикали.
background-repeat
Способ повторения изображения.
Возможные значения:
- no-repeat — без повторения;
- repeat — с повторением; (значение по умолчанию)
- repeat-x — с повторением только по горизонтали;
- repeat-y — только по вертикали.
background-clip, background-origin и background-size
В 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;
}