freeCodeCamp

3.5 KiB

Raw Blame History

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;

Это будет работать, даже если цвет и приложение отсутствуют.

Дополнительная информация:

MDN

3.5 KiB Raw Blame History Unescape Escape