92 lines
3.5 KiB
Markdown
92 lines
3.5 KiB
Markdown
---
|
||
title: CSS3 Backgrounds
|
||
localeTitle: Фоны CSS3
|
||
---
|
||
## Фоны CSS3
|
||
|
||
Условное свойство CSS `background` shorthand используется для определения мультипликативных свойств, таких как:
|
||
|
||
`background-color` , `background-image` , `background-repeat` , `background-attachment` и `background-position`
|
||
|
||
### Фоновый цвет
|
||
|
||
Свойство `background-color` указывает цвет фона элемента.
|
||
|
||
```css
|
||
background-color : #F00;
|
||
```
|
||
|
||
### Изображение на заднем плане
|
||
|
||
Свойство `background-image` указывает изображение, которое будет использоваться в качестве фона элемента. По умолчанию изображение повторяется, чтобы покрыть всю поверхность элемента.
|
||
|
||
```css
|
||
background-image: url("GitHub-Mark.png");
|
||
```
|
||
|
||
### Фоновое изображение - повторение
|
||
|
||
По умолчанию свойство `background-image` повторяется на оси X и Y. Если вы хотите установить ось, например, ось X, используйте тип свойства `background-repeat` :
|
||
|
||
```css
|
||
background-image: url("GitHub-Mark.png");
|
||
background-repeat: repeat-x;
|
||
```
|
||
|
||
Но иногда вы не хотите, чтобы ваш фон был на поверхности, вы должны указать его, набрав:
|
||
|
||
```css
|
||
background-image: url("GitHub-Mark.png");
|
||
background-repeat: no-repeat;
|
||
```
|
||
|
||
### Фоновое изображение - позиция
|
||
|
||
Вы можете указать положение фона, набрав:
|
||
|
||
```css
|
||
background-image: url("GitHub-Mark.png");
|
||
background-repeat: no-repeat;
|
||
background-position : left bottom;
|
||
```
|
||
|
||
Он установит фон в левом нижнем углу элемента.
|
||
|
||
### Фоновое изображение - фиксированная позиция
|
||
|
||
Если вы хотите иметь фоновое изображение, которое не будет прокручиваться вместе с остальной частью страницы, вы можете использовать свойство `background-attachement` :
|
||
|
||
```css
|
||
background-image: url("GitHub-Mark.png");
|
||
background-repeat: no-repeat;
|
||
background-position: left bottom;
|
||
background-attachment: fixed;
|
||
```
|
||
|
||
### Сокращенное имущество
|
||
|
||
Вы можете передать все свойства в одном супер-свойство `background` :
|
||
|
||
```css
|
||
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
|
||
```
|
||
|
||
Когда вы используете стенографическую собственность, вы должны соблюдать этот порядок:
|
||
|
||
1. Фоновый цвет
|
||
2. Изображение на заднем плане
|
||
3. Повторение фона
|
||
4. Фоновая привязка
|
||
5. Фоновая позиция
|
||
|
||
Не имеет значения, отсутствует ли одно свойство, если вы соблюдаете заказ:
|
||
|
||
```css
|
||
background: url("GitHub-Mark.png") no-repeat left bottom;
|
||
```
|
||
|
||
Это будет работать, даже если цвет и приложение отсутствуют.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |