CSS/Фон: различия между версиями
Oleg4280 (обсуждение | вклад) Нет описания правки |
DannyS712 (обсуждение | вклад) м <source> -> <syntaxhighlight> (phab:T237267) |
||
Строка 48: | Строка 48: | ||
Подробная форма записи: |
Подробная форма записи: |
||
< |
<syntaxhighlight lang="css"> |
||
p { |
p { |
||
background-color: #ccc; |
background-color: #ccc; |
||
Строка 60: | Строка 60: | ||
background-position: bottom; |
background-position: bottom; |
||
} |
} |
||
</syntaxhighlight> |
|||
</source> |
|||
Сокращённая форма записи: |
Сокращённая форма записи: |
||
< |
<syntaxhighlight lang="css"> |
||
p { |
p { |
||
background-color: #ccc; |
background-color: #ccc; |
||
Строка 72: | Строка 72: | ||
background: #8cf url('sea.jpg') no-repeat fixed bottom; |
background: #8cf url('sea.jpg') no-repeat fixed bottom; |
||
} |
} |
||
</syntaxhighlight> |
|||
</source> |
|||
{{BookCat}} |
{{BookCat}} |
Текущая версия от 16:09, 16 апреля 2020
Свойства[править]
Свойства, которые устанавливают фон элемента:
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;
}