CSS фон срещу фонов цвят

CSS предоставя различни свойства за стилизиране на HTML елементите. Тези свойства се използват за различни цели, като добавяне на фоново изображение и цвят и задаване на ширината и височината на HTML елементите. Тези свойства включват поле, цвят, ширина, височина, фон, цвят на фона и много други. По-конкретно, свойството background и background-color се използва за задаване на фона на HTML елементите.

В това ръководство ще научим подробно разликата между свойствата на фона и цвета на фона.

Да започваме!

Свойство на CSS фон

За да коригирате фона на всеки HTML елемент, CSS „ заден план ” имотът е усвоен. Това е съкратено свойство на още осем свойства, което означава, че можете да ги използвате всички в един ред. Тези други свойства са:

Цвят на фона
фоново изображение
позиция на фона
размер на фона
фоново повторение
фон-произход
фонов клип
фон-прикачен файл

Синтаксис

Ето синтаксиса на свойството на фона:

фон: позиция на цветно изображение/размер повтаряне на произхода на прикачения клип

Нека преминем към обяснението на всички горепосочени свойства едно по едно.

Свойство цвят на фона на CSS

Използвайки ' Цвят на фона ”, можете да зададете цвета на фона. Цветът ще се появи зад HTML елементите.

Синтаксис

Синтаксисът на свойството background-color е:

Цвят на фона : цвят

На мястото на „ цвят ”, можете да зададете цвета на фона, който искате да се показва зад елементите.

Пример

Първо, в HTML файла ще създадем контейнер с помощта на тага

и след това ще добавим заглавие и параграф.

HTML

< див >

< h1 > LinuxHint < / h1 >

< стр > Добре дошли в нашия уебсайт < / стр >

< / див >

В CSS ще коригираме височината на div като „ 100% “, за да се появи на цялата страница и размерът на шрифта на текста като „ хх-голям ”. След това задайте цвета на фона като „ аква ”.

CSS

див {

височина : 100% ;

размер на шрифта : хх-голям ;

Цвят на фона : аква ;

}

В предоставеното по-долу изображение можете да видите, че цветът на фона е приложен:

Свойство CSS фоново изображение

„ фоново изображение ” Свойството се използва за задаване на едно или повече изображения като фон на HTML елементите. Можете да използвате това свойство, за да добавите различни фонови изображения за различни елементи.

Синтаксис

Синтаксисът на свойството background-image е:

фоново изображение: url()

Тук дайте пътя на изображението, което искате да зададете като фон, като аргумент на „ url() ”.

Пример

В продължение на предишния пример добавете фоново изображение в „ див ” клас. Ще добавим URL адреса на изображението като „ url(img.jpg) ”:

див {

...

фоново изображение : URL адрес ( img.jpg ) ;

}

Предоставеният по-долу изход показва, че фоновото изображение е добавено успешно:

Имайте предвид, че изображението се повтаря. За да разрешите този проблем, вижте следващия имот.

CSS свойство за фоново повторение

Когато добавите изображение като фон на уеб страница, то се повтаря по подразбиране. За да избегнете това повторение и да зададете шаблона според вашия избор, „ фоново повторение ” имотът е усвоен.

Синтаксис

Синтаксисът на свойството background-repeat е:

фоново повторение : повторете | повторение-x | повторение-у | не-повтаряне

Описанието на посочените стойности на свойството background-repeat е дадено по-долу:

повтарям: Използва се за повтаряне на изображението в двете посоки, вертикално и хоризонтално.
повторение-x: Използва се за настройка на повторението на изображението само хоризонтално.
повторение: Той определя вертикалното повторение на изображението.
не се повтаря: Използва се за избягване на повторение на изображението.

Пример

Тук ще зададем стойността на свойството background-repeat като „ не-повтаряне ”:

див {

...

фоново повторение : не-повтаряне ;

}

Резултатът от предоставения по-горе код е даден по-долу. Можете да видите, че изображението вече не се повтаря:

Свойство CSS background-position

За да зададете позицията на фоновото изображение, „ позиция на фона ” имотът се ползва. Позволява ви да регулирате изображението в различни позиции като ляво горе, ляво централно, ляво долу, дясно горе, дясно централно и много други.

Синтаксис

Синтаксисът на свойството background-position е:

позиция на фона : стойност

На мястото на „ стойност ”, можете да посочите позицията на изображението.

Пример

Тук ще зададем фоновата позиция като „ център ”:

див {

...

позиция на фона : център ;

}

В резултата по-долу изображението се появява в центъра на страницата:

Свойство CSS background-size

За да зададете размера на фоновото изображение, „ размер на фона ” имотът се ползва.

Синтаксис

Background-size има следния синтаксис:

размер на фона : дължина|капак

Следва описанието на стойностите на свойството background-size:

дължина: Използва се за фиксиране на ширината и височината на фоновото изображение.
Покрийте: Използва се за настройка на фоновото изображение в целия фон.

Пример

Ще зададем размера на фона като „ 100% 'височина и' 80% ” ширина:

див {

...

размер на фона : 100% 80% ;

}

Можете да видите, че изображението е преоразмерено въз основа на посочените размери:

Свойство произход на фона на CSS

„ фон-произход ” се използва за регулиране на зоната за позициониране на фоновото изображение. Изображението се коригира в горния ляв ъгъл по подразбиране.

Синтаксис

Синтаксисът на свойството background-origin е:

фон-произход : подложка-кутия| гранична кутия | кутия за съдържание

Стойностите на свойството background-origin са описани по-долу:

подложка-кутия: Това е стойността по подразбиране на свойството background-origin, използвано за регулиране на позицията на фоновото изображение според ръба на подложката.
гранична кутия: Използва се за настройване на изображението според граничната кутия на изображението.
кутия за съдържание: Използва се за настройка на фоновото изображение в съответствие със съдържанието на изображението.

Забележка: Свойството background-origin не работи, ако стойността на свойството background-attachment е зададена като „ фиксирани ”.

Пример

Първо създайте рамка около контейнера. Тук ще продължим предишния пример и ще зададем стойността на подложката като „ 10px ”. След това регулирайте ширината на границата като „ 15px “, стил като „ хребет “, и цвят като „ rgb(1, 68, 68) ”. В крайна сметка ще присвоим стойността на свойството background-origin като „ кутия за съдържание ”:

див {

...

подплата : 10px ;

граница : 15px хребет rgb ( 1 , 68 , 68 ) ;

фон-произход : кутия за съдържание ;

}

Резултатът от предоставения по-горе код е даден по-долу. Можете да видите, че позицията на изображението е зададена според съдържанието на div:

Свойство CSS background-clip

„ фонов клип ” свойството работи върху цвета на фона на елемента. Позволява ви да контролирате колко далеч фоновият цвят се простира отвъд даден елемент, като подложката на елемента, границата му и съдържанието му.

Синтаксис

Синтаксисът на свойството background-clip е:

фон-произход : гранична кутия | подложка-кутия | кутия за съдържание

Стойностите на свойството background-origin са описани по-долу:

гранична кутия: Това е стойността по подразбиране на свойството background-origin, използвано за задаване на цвета на фона зад границата.
подложка-кутия: Използва се за регулиране на цвета в полето за подложка на елемента.
кутия за съдържание: Използва се за задаване на цвят на фона според съдържанието на елемента.

Пример

Ще продължим предишния пример и ще променим стойността на стила на границата на „ пунктиран ”, за да разберете свойството background-clip. След това ще зададем стойността на свойството background-clip като „ подложка-кутия ”:

див {

...

фонов клип : подложка-кутия ;

}

Изходът означава, че белият цвят на фона се показва, когато ръбът на границата приключи:

CSS свойство за прикачване на фона

„ фон-прикачен файл ” Свойството се използва за коригиране на поведението или изображението при превъртане на страницата. Поведението му може да се настрои да се превърта с други елементи или да се фиксира.

Синтаксис

Синтаксисът на свойството background-attachment е:

фон-прикачен файл : стойност

Можете да зададете стойността на background-attachment като „ фиксирани ”, за да коригирате фоновото изображение или “ превъртане ”, за да позволите на изображението да се превърта със страницата.

Забележка: По подразбиране стойността на свойството background-attachment е зададена като „ превъртане ”.

Може да се види, че добавеното фоново изображение не е статично, когато превъртаме. Сега нека поправим този проблем.

За да направим това, задаваме стойността на свойството background-attachment като „ фиксирани ”:

див {

...

фон-прикачен файл : фиксирани ;

}

Ето резултата, показващ, че изображението е коригирано:

Сега се насочете към сравнението между свойствата на фона и цвета на фона.