Урок за HTML цвят на фона - Как да промените цвета на фона на Div, обяснен с примери за кодове

Едно от най-често срещаните неща, които може да се наложи да направите като уеб разработчик, е да промените цвета на фона на HTML елемент. Но може да е объркващо да се направи, ако не разбирате как да използвате CSS background-colorсвойството.

В статията обсъждаме

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

Цвят на фона по подразбиране на елемент

По подразбиране цветът на фона на div е transparent. Така че, ако не посочите цвета на фона на div, той ще покаже този на своя родителски елемент.

Промяна на цвета на фона на Div

В този пример ще променим цветовете на фона на следните div.

 I love HTML I love CSS I love JavaScript 

Без никакъв стил, това ще се превърне визуално в следното.

Нека променим цвета на фона на divs, като добавим стилове към класовете. Можете да продължите, като изпробвате примерите в HTML файл.

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

Това ще доведе до следното:

Готино! Успешно променихме цвета на фона на този div. След това нека да научим повече за това свойство. Нека да видим как свойството background-color влияе върху части от модела на CSS-box.

Цвят на фона и модел на CSS Box

Според модела на CSS кутии, всички HTML елементи могат да бъдат моделирани като правоъгълни кутии. Всяка кутия се състои от 4 части, както е показано на диаграмата по-долу.

Можете да прочетете модела на кутията, ако не сте запознат с него. Въпросът е, коя част от модела на кутията е засегната, когато промените цвета на фона на div? Простият отговор е областта на подплънките и областта на съдържанието. Нека потвърдим това, като използваме пример.

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

Това ще доведе до:

От примера по-горе виждаме, че зоната на полето и граничната зона не се влияят от промяната в цвета на фона. Можем да променим цвета на контура, като използваме свойството border-color. Областта на полето остава прозрачна и отразява цвета на фона на родителския контейнер.

И накрая, нека обсъдим стойностите, които може да приеме свойството background-color.

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

Подобно на свойството color, свойството background-color може да приема шест различни стойности. Нека разгледаме трите най-често срещани стойности с пример. В примера задаваме цвета на фона на div на червен с различни стойности.

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Забележете, че всички те се получават с един и същ цвят на фона.

Други стойности, които background-colorсобствеността може да приеме, включват HSL стойност, специални стойности на ключови думи и глобални стойности. Ето примери за всеки от тях.

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

Можете да прочетете повече за всяка от тези стойности тук.

Допълнителна бележка

Когато задавате цвета на фона на елемент, е важно да се уверите, че съотношението на контраста на цвета на фона и цвета на текста, който съдържа, е достатъчно високо. Това е, за да се гарантира, че хората със слабо зрение могат лесно да четат текста.

Помислете за тези два div.

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

Вторият div има много по-добро съотношение на контраст между цвета на фона и цвета на текста. По този начин е по-достъпно и по-ясно за хората да четат.

Заключение

В тази статия видяхме как можете да промените цвета на фона на div. Също така обсъдихме кои части от модела на CSS кутия са засегнати от промяната в цвета на фона. Накрая обсъдихме стойностите, които може да приеме свойството background-color.

Надявам се, че тази статия ви е била полезна. Благодаря за четенето.