# Kaip pritaikyti HTML fonus su spalvomis ar vaizdais

HTML fonai gali būti sukurti naudojant spalvų vertes arba vaizdo failą. Pasirinkus tinkamą foną, galima pagerinti svetainės dizainą ir užtikrinti, kad turinys išliktų aiškus ir lengvai skaitomas.

## Kas yra HTML fonai?

Svetainės **turinio fonas** vadinamas HTML fonu. Šie fonai gali būti nustatyti kuriant puslapį HTML formatu. Juos taip pat galima keisti vėliau, jei reikia. Pagal numatytuosius nustatymus HTML fonai yra balti. Tai keisti rekomenduojama ne tik siekiant pagerinti svetainės dizainą, bet ir padidinti turinio matomumą.

## Kaip galima pakeisti HTML foną?

Yra du pagrindiniai būdai kurti HTML fonus:

- **taikant spalvos vertę**
- **naudojant vaizdą arba gradientą**

Šios reikšmės nustatomos naudojant HTML atributą `style`. Kituose skyriuose aprašysime abu metodus.

Tip Daugiau informacijos apie HTML stiliaus žymės galimybes galite rasti mūsų straipsnyje šia tema.

### HTML fonų apibrėžimas pagal spalvos vertę

Norėdami pakeisti HTML fono spalvą, naudokite `style` atributą ir `background-color` arba `bgcolor` savybę. Yra trys skirtingi **spalvos vertės** nurodymo variantai:

- **Spalvos pavadinimas**: galite nustatyti norimą spalvą tiesiog naudodami jos pavadinimą. Be standartinių spalvų, tokių kaip `red`, `yellow` ar `green`, taip pat galima naudoti specialias spalvas, pvz., `lightblue` ar `deepskyblue`. Nurodant spalvą, didžiosios ir mažosios raidės nesvarbios.
- **Šešioliktainis spalvos kodas**: spalvas taip pat galite nurodyti naudodami šešių skaitmenų šešioliktainį skaičių. Jis susideda iš trijų porų, sudarytų iš skaitmenų `9` ir raidžių `f`. Pirmoji pora reiškia raudonos spalvos vertę, antroji – žalios, o trečioji – mėlynos, kur 00 yra mažiausia vertė, o ff – didžiausia. Pavyzdžiui, mėlyna spalva būtų `0000ff`.
- **RGB vertė**: Taip pat galite naudoti RGB vertę, kuri taip pat yra šešioliktainio spalvų kodo pagrindas. Vertės svyruoja nuo `0` iki `255` ir atitinka raudoną, žalią ir mėlyną spalvas. Pavyzdžiui, mėlyna spalva būtų RGB (0, 0, 255).

Sintaksė, kurią naudojate norėdami apibrėžti pageidaujamą HTML fonų spalvą, atrodo taip:

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

Šiame pavyzdyje naudojame šešioliktainį spalvų kodą, kad nustatytume šviesiai mėlyną foninę spalvą:

```html
<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>
<div class="hash d-none" hidden>hash_b1abafc35a6a9a095ecb8f6326839ace6cd0b203</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Tai atrodo taip:

[![Image: HMTL background: Colour example](https://www.ionos.com/lt-lt/digitalguide/fileadmin/_processed_/1/5/csm_html-color-background-example_fa19e51324.webp "HMTL background: Colour example")](https://www.ionos.com/lt-lt/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-color-background-example.png) Sample HTML background with the hex code ‘#BFEFFF’. Jei reikia, galite atskirai nustatyti HTML fonų spalvas atskiriems savo tinklalapių skyriams. Tai daroma naudojant `style` atributą ir `background-color` savybę. Kaip tai veikia, galite pamatyti šiame pavyzdyje, kuriame skirtingos spalvos buvo nustatytos bendram fonui, taip pat `<h2>` antraščių ir `<p>` teksto skyrių fonams:

```html
<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>
<div class="hash d-none" hidden>hash_b1abafc35a6a9a095ecb8f6326839ace6cd0b203</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

[![Image: Example: Three different coloured HTML backgrounds](https://www.ionos.com/lt-lt/digitalguide/fileadmin/_processed_/b/1/csm_html-background-example-2_a5a13bd28c.webp "Example: Three different coloured HTML backgrounds")](https://www.ionos.com/lt-lt/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-background-example-2.png) Example of an HTML background with three different colours. ### Vaizdų nustatymas kaip HTML fonai

Kad galėtumėte naudoti vaizdus ar grafiką kaip HTML foną, jie turi būti išsaugoti *JPG*, *PNG*, *SVG*, *WebP* arba *GIF* vaizdo formatais. Toliau pateiktame pavyzdyje parodytas tinkamas kodas, skirtas vaizdui integruoti kaip foną. Vaizdo kelias turi būti pritaikytas individualiai:

```html
<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>
<div class="hash d-none" hidden>hash_b1abafc35a6a9a095ecb8f6326839ace6cd0b203</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Naudodami vaizdą, visada turėtumėte nepamiršti turinio įskaitomumo. Nurodydami papildomus parametrus, galite koreguoti vaizdo ar grafiko **padėtį**, kad tekstas būtų aiškiai matomas fone.


This is a markdown version of: [https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/html-fonai/](https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/html-fonai/) for AI/LLM consumption.