Свойствата на фона на CSS се използват за добавяне на фонови ефекти за елементи.
В тези глави ще научите за следните свойства на фона на CSS:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(съкратено свойство)
1. CSS цвят на фона
В background-colorимота определя цвета на фона на елемент.
Пример
Цветът на фона на страницата е зададен по следния начин:
body {
background-color: lightblue;
}При CSS цветът най-често се определя от:
- валидно име на цвят - като "червен"
- шестнадесетична стойност - като "# ff0000"
- RGB стойност - като "rgb (255,0,0)"
Погледнете CSS стойностите на цвета за пълен списък с възможни стойности на цветовете.
Други елементи
Можете да зададете цвета на фона за всякакви HTML елементи:
Пример
Тук елементите <h1>, <p> и <div> ще имат различни цветове на фона:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}Непрозрачност / Прозрачност
В opacityимота определя непрозрачност / прозрачността на даден елемент. Може да приеме стойност от 0,0 - 1,0. Колкото по-ниска е стойността, толкова по-прозрачна е:
непрозрачност 1
непрозрачност 0.6
непрозрачност 0,3
непрозрачност 0,1
Пример
div {
background-color: green;
opacity: 0.3;
}Забележка: Когато използвате opacityсвойството за добавяне на прозрачност към фона на елемент, всички негови дъщерни елементи наследяват същата прозрачност. Това може да направи текста в напълно прозрачен елемент труден за четене.
Прозрачност с помощта на RGBA
Ако не искате да приложите непрозрачност към дъщерни елементи, както в нашия пример по-горе, използвайте RGBA цветови стойности. Следващият пример задава непрозрачността на цвета на фона, а не на текста:
100% непрозрачност
60% непрозрачност
30% непрозрачност
10% непрозрачност
От нашата глава CSS Colors научихте , че можете да използвате RGB като цветова стойност. В допълнение към RGB, можете да използвате RGB стойност на цвета с алфа канал (RGB A ) - който определя непрозрачността за цвят.
Стойността на цвета RGBA е посочена с: rgba (червено, зелено, синьо, алфа ). В алфа параметър е число между 0.0 (напълно прозрачен) и 1.0 (напълно непрозрачен).
Съвет: Ще научите повече за RGBA цветове в нашата глава за CSS цветове .
Пример
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}2. CSS фоново изображение
В background-imageимота уточнява изображение, което да се използва като фон на елемент.
По подразбиране изображението се повтаря, така че обхваща целия елемент.
Пример
Задайте фоновото изображение за страница:
body {
background-image: url("paper.gif");
}Пример
Този пример показва лоша комбинация от текст и фоново изображение. Текстът е трудно четим:
body {
background-image: url("bgdesert.jpg");
}Забележка: Когато използвате фоново изображение, използвайте изображение, което не нарушава текста.
Фоновото изображение може да бъде зададено и за определени елементи, като елемента <p>:
Пример
p {
background-image: url("paper.gif");
}3. CSS фон-повторение
По подразбиране background-imageсвойството повтаря изображение както хоризонтално, така и вертикално.
Някои изображения трябва да се повтарят само хоризонтално или вертикално, или ще изглеждат странно, ето така:
Пример
body {
background-image: url("gradient_bg.png");
}Ако изображението по-горе се повтаря само хоризонтално ( background-repeat: repeat-x;), фонът ще изглежда по-добре:
Пример
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}Съвет: За да повторите изображение вертикално, задайтеbackground-repeat: repeat-y;
CSS background-repeat: no-repeat
Показването на фоновото изображение само веднъж също е посочено от background-repeatсвойството:
Пример
Показвайте фоновото изображение само веднъж:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}В горния пример фоновото изображение се поставя на същото място като текста. Искаме да променим позицията на изображението, така че да не нарушава твърде много текста.
CSS фонова позиция
В background-positionимота се използва за определяне на позицията на фоновото изображение.
Пример
Позиционирайте фоновото изображение в горния десен ъгъл:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}4. CSS прикачен фон
На background-attachmentуточнява собственост дали фоновото изображение трябва да преминете, или да бъдат фиксирани (няма да превъртите с останалата част от страницата):
Пример
Посочете, че фоновото изображение трябва да бъде фиксирано:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}Пример
Посочете, че фоновото изображение трябва да се превърта с останалата част на страницата:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}5. CSS фон - Стенографско свойство
За да съкратите кода, също така е възможно да зададете всички свойства на фона в едно единствено свойство. Това се нарича стенографско свойство.
Вместо да пишете:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Можете да използвате стенографското свойство background:
Пример
Използвайте стенографското свойство, за да зададете свойствата на фона в една декларация:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}При използване на стенографското свойство редът на стойностите на свойството е:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Няма значение дали една от стойностите на свойствата липсва, стига другите да са в този ред. Имайте предвид, че не използваме свойството background-attachment в примерите по-горе, тъй като то няма стойност.
Изпробвайте се с упражнения!
Всички свойства на фона на CSS
| Property | Description |
|---|---|
| background | Sets all the background properties in one declaration |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| background-clip | Specifies the painting area of the background |
| background-color | Sets the background color of an element |
| background-image | Sets the background image for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-position | Sets the starting position of a background image |
| background-repeat | Sets how a background image will be repeated |
| background-size | Specifies the size of the background image(s) |
