3.5 KiB
title | localeTitle |
---|---|
CSS3 Backgrounds | Фоны CSS3 |
Фоны CSS3
Условное свойство CSS background
shorthand используется для определения мультипликативных свойств, таких как:
background-color
, background-image
, background-repeat
, background-attachment
и background-position
Фоновый цвет
Свойство background-color
указывает цвет фона элемента.
background-color : #F00;
Изображение на заднем плане
Свойство background-image
указывает изображение, которое будет использоваться в качестве фона элемента. По умолчанию изображение повторяется, чтобы покрыть всю поверхность элемента.
background-image: url("GitHub-Mark.png");
Фоновое изображение - повторение
По умолчанию свойство background-image
повторяется на оси X и Y. Если вы хотите установить ось, например, ось X, используйте тип свойства background-repeat
:
background-image: url("GitHub-Mark.png");
background-repeat: repeat-x;
Но иногда вы не хотите, чтобы ваш фон был на поверхности, вы должны указать его, набрав:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
Фоновое изображение - позиция
Вы можете указать положение фона, набрав:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position : left bottom;
Он установит фон в левом нижнем углу элемента.
Фоновое изображение - фиксированная позиция
Если вы хотите иметь фоновое изображение, которое не будет прокручиваться вместе с остальной частью страницы, вы можете использовать свойство background-attachement
:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
Сокращенное имущество
Вы можете передать все свойства в одном супер-свойство background
:
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
Когда вы используете стенографическую собственность, вы должны соблюдать этот порядок:
- Фоновый цвет
- Изображение на заднем плане
- Повторение фона
- Фоновая привязка
- Фоновая позиция
Не имеет значения, отсутствует ли одно свойство, если вы соблюдаете заказ:
background: url("GitHub-Mark.png") no-repeat left bottom;
Это будет работать, даже если цвет и приложение отсутствуют.