HTML fonus var izveidot, iz­man­to­jot krāsu vērtības vai attēlu failu. Pareiza fona izvēle var uzlabot jūsu tīmekļa vietnes dizainu, vien­lai­kus no­dro­ši­not, ka saturs paliek skaidrs un viegli lasāms.

Kas ir HTML foni?

Tīmekļa lapas satura fons tiek saukts par HTML fonu. Šos fonus var iestatīt, veidojot lapu HTML. Tos var arī vēlāk mainīt at­bil­sto­ši va­ja­dzī­bām. Pēc no­klu­sē­ju­ma HTML foni ir balti. To maiņa ir ieteicama ne tikai kā veids, kā uzlabot tīmekļa vietnes dizainu, bet arī kā veids, kā uzlabot satura redzamību.

Kā var mainīt HTML fonu?

Ir divi galvenie veidi, kā izveidot HTML fonus:

  • pie­mē­ro­jot krāsu vērtību
  • iz­man­to­jot attēlu vai gradientu

Šīs vērtības tiek ie­sta­tī­tas ar HTML atribūtu style. Nākamajās sadaļās mēs iz­skaid­ro­sim abas metodes.

HTML fona de­fi­nē­ša­na pēc krāsas vērtības

Lai mainītu HTML fona krāsu, iz­man­to­jiet style atribūtu un background-color vai bgcolor īpašību. Krāsas vērtības no­rā­dī­ša­nai ir trīs dažādas iespējas:

  • Krāsas nosaukums: Jums ir iespēja iestatīt vēlamo krāsu, vienkārši iz­man­to­jot tās nosaukumu. Papildus standarta krāsām, piemēram, red, yellow vai green, ir pieejamas arī īpašas krāsas, piemēram, lightblue vai deepskyblue. Krāsu norādot, nav svarīgi, vai tiek izmantoti lielie vai mazie burti.
  • Hek­sa­de­ci­mā­lais krāsu kods: Jūs varat norādīt krāsas, iz­man­to­jot to sešu ciparu hek­sa­de­ci­mā­lo numuru. Tas sastāv no trim pāriem, kas veidoti no cipariem 0 līdz 9 un burtiem a līdz f. Pirmais pāris attēlo sarkano vērtību, otrais attēlo zaļo, bet trešais attēlo zilo, kur 00 ir zemākā vērtība un ff ir augstākā. Piemēram, zils būtu 0000ff.
  • RGB vērtība: Al­ter­na­tī­vi varat izmantot RGB vērtību, kas ir arī sešzīmju krāsu koda pamatā. Vērtības ir no 0 līdz 255 un atbilst krāsām sarkana, zaļa un zila. Piemēram, zila krāsa būtu RGB (0, 0, 255).

Sintakse, ko iz­man­to­jat, lai definētu vēlamo krāsu HTML fonam, izskatās šādi:

<body style="background-color: value;">
html

Šajā piemērā mēs iz­man­to­jam hek­sa­de­ci­mā­lo krāsu kodu, lai norādītu gaiši zilu kā fona krāsu:

<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Tas izskatās šādi:

Image: HMTL background: Colour example
Sample HTML background with the hex code ‘#BFEFFF’.

Ja ne­pie­cie­šams, varat arī atsevišķi definēt krāsas HTML fonam at­se­viš­ķām jūsu tīmekļa lapu sadaļām. To var izdarīt, iz­man­to­jot style atribūtu un background-color īpašību. Jūs varat redzēt, kā tas darbojas, šajā piemērā, kur dažādas krāsas ir ie­sta­tī­tas visam fonam, kā arī <h2> vir­srak­stu un <p> teksta sadaļu fonam:

<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Image: Example: Three different coloured HTML backgrounds
Example of an HTML background with three different colours.

Attēlu ie­sta­tī­ša­na kā HTML fonu

Lai attēlus vai grafikas varētu izmantot kā HTML fonu, tie jāglabā JPG, PNG, SVG, WebP vai GIF attēlu formātos. Turp­mā­ka­jā piemērā parādīts at­bil­sto­šais kods attēla in­teg­rē­ša­nai kā fonu. Attēla ceļš jāpielāgo in­di­vi­duā­li:

<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Iz­man­to­jot attēlu, vienmēr jāpatur prātā satura sa­la­sā­mī­ba. Norādot papildu pa­ra­met­rus, varat pielāgot attēla vai grafika no­vie­to­ju­mu, lai teksts būtu atšķirams no fona.

Go to Main Menu