# 11. Színek és háttér

2025. november 23. • 18 perc olvasás • CSS3 alapok

A színek és háttérek kulcsszerepet játszanak a weboldalak vizuális megjelenésében. Ebben a cikkben megismerkedhetsz a különböző színformátumokkal, a háttérszínek és háttérképek beállításával, valamint a modern gradiens hátterekkel.

#### Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

Ebből a leckéből érettségi anyag:

- Színformátumok alapjai (névszínek, HEX, RGB)
- `color` és `background-color` tulajdonságok
- Háttérkép beállítása (`background-image`)

Bónusz anyag (nem kötelező): HSL színek, gradiensek, opacity részletesen, háttérkép haladó beállítások.

## Színformátumok a CSS-ben VEGYES

A CSS többféle módot kínál a színek megadására. Mindegyiknek megvannak az előnyei és a használati területei.

### 1. Névszínek (Named Colors) EMELT SZINT

A CSS 140+ előre definiált színnevet támogat. Egyszerűek és olvashatóak, de korlátozott a választék.

CSS - Névszínek
`/* Alapszínek */ .piros { color: red; } .kek { color: blue; } .zold { color: green; } .sarga { color: yellow; } /* Semleges színek */ .fekete { color: black; } .feher { color: white; } .szurke { color: gray; } /* Speciális színek */ .narancs { color: orange; } .rozsaszin { color: pink; } .lila { color: purple; } .turkiz { color: turquoise; } .arany { color: gold; } /* Árnyalatok */ .sotetszurke { color: darkgray; } .vilagosszurke { color: lightgray; } .sotetpiros { color: darkred; } .vilagoskek { color: lightblue; } /* Átlátszó */ .atlatszo { color: transparent; }`

#### Élő példa - Névszínek:

Alapszínek:

red blue green yellow

Semleges színek:

black white gray

Speciális színek:

orange pink purple turquoise gold

Árnyalatok:

darkgray lightgray darkred lightblue

Átlátszó:

transparent

### 2. Hexadecimális (HEX) színek EMELT SZINT

A HEX formátum a leggyakrabban használt módszer. A `#` jellel kezdődik, és 6 hexadecimális számjegyből áll (vagy 3, ha rövidíthető).

CSS - HEX színek
`/* HEX formátum: #RRGGBB */ /* R = vörös (00-FF), G = zöld (00-FF), B = kék (00-FF) */ .szin1 { color: #ff0000; } /* Tiszta piros */ .szin2 { color: #00ff00; } /* Tiszta zöld */ .szin3 { color: #0000ff; } /* Tiszta kék */ .szin4 { color: #ffffff; } /* Fehér */ .szin5 { color: #000000; } /* Fekete */ .szin6 { color: #808080; } /* Szürke (50%) */ /* Gyakori webes színek */ .primary { color: #007bff; } /* Bootstrap kék */ .success { color: #28a745; } /* Sikeres zöld */ .danger { color: #dc3545; } /* Hiba piros */ .warning { color: #ffc107; } /* Figyelmeztetés sárga */ /* Rövidített HEX (ha minden pár azonos) */ .szin7 { color: #f00; } /* = #ff0000 (piros) */ .szin8 { color: #0f0; } /* = #00ff00 (zöld) */ .szin9 { color: #fff; } /* = #ffffff (fehér) */ .szin10 { color: #333; } /* = #333333 (sötétszürke) */ /* HEX átlátszósággal (8 számjegy) */ .szin11 { color: #ff000080; } /* 50% átlátszó piros */ .szin12 { color: #007bff33; } /* 20% átlátszó kék */`

#### Élő példa - HEX színek:

Tiszta színek (RGB alapszínek):

#ff0000 #00ff00 #0000ff

Semleges színek:

#ffffff #000000 #808080

Gyakori webes színek:

#007bff #28a745 #dc3545 #ffc107

Rövidített HEX:

#f00 #0f0 #fff #333

HEX átlátszósággal (8 számjegy):

#ff000080 #007bff33

#### HEX értékek magyarázata

- 00: Az adott színcsatorna minimuma (0%)
- FF: Az adott színcsatorna maximuma (100%)
- 80: Középérték (50%)
- #RRGGBBAA: 8 jegyű HEX az átlátszósággal (Alpha)

### 3. RGB és RGBA színek EMELT SZINT

Az RGB formátum decimális számokkal adja meg a színcsatornákat (0-255). Az RGBA az átlátszóságot is tartalmazza.

CSS - RGB és RGBA
`/* RGB formátum: rgb(vörös, zöld, kék) */ /* Értékek: 0-255 */ .szin1 { color: rgb(255, 0, 0); } /* Piros */ .szin2 { color: rgb(0, 255, 0); } /* Zöld */ .szin3 { color: rgb(0, 0, 255); } /* Kék */ .szin4 { color: rgb(255, 255, 255); } /* Fehér */ .szin5 { color: rgb(0, 0, 0); } /* Fekete */ .szin6 { color: rgb(128, 128, 128); } /* Szürke */ /* RGBA formátum: rgba(vörös, zöld, kék, átlátszóság) */ /* Átlátszóság (alpha): 0 = teljesen átlátszó, 1 = teljesen látható */ .szin7 { color: rgba(255, 0, 0, 1); } /* Piros, nem átlátszó */ .szin8 { color: rgba(255, 0, 0, 0.5); } /* Piros, 50% átlátszó */ .szin9 { color: rgba(255, 0, 0, 0.25); } /* Piros, 75% átlátszó */ .szin10 { color: rgba(0, 0, 0, 0); } /* Teljesen átlátszó */ /* Gyakori használat: árnyékok, overlay-ek */ .overlay { background: rgba(0, 0, 0, 0.7); /* 70% fekete overlay */ } .kartya-arnyek { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }`

#### Élő példa - RGB és RGBA színek:

RGB alapszínek:

rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255)

Semleges RGB színek:

rgb(255, 255, 255) rgb(0, 0, 0) rgb(128, 128, 128)

RGBA átlátszóság (0-1 érték):

alpha: 1 alpha: 0.75 alpha: 0.5 alpha: 0.25

Gyakori használat - Overlay:

rgba(0, 0, 0, 0.7) overlay

### 4. HSL és HSLA színek BÓNUSZ

A HSL (Hue, Saturation, Lightness) formátum intuitívabb, mert a színt, telítettséget és világosságot külön állíthatod.

CSS - HSL és HSLA
`/* HSL formátum: hsl(árnyalat, telítettség, világosság) */ /* Árnyalat (Hue): 0-360 fok (színkör) */ /* Telítettség (Saturation): 0-100% */ /* Világosság (Lightness): 0-100% */ /* Színkör fok értékek */ .piros { color: hsl(0, 100%, 50%); } /* 0° = Piros */ .narancs { color: hsl(30, 100%, 50%); } /* 30° = Narancs */ .sarga { color: hsl(60, 100%, 50%); } /* 60° = Sárga */ .zold { color: hsl(120, 100%, 50%); } /* 120° = Zöld */ .turkiz { color: hsl(180, 100%, 50%); } /* 180° = Türkiz */ .kek { color: hsl(240, 100%, 50%); } /* 240° = Kék */ .lila { color: hsl(270, 100%, 50%); } /* 270° = Lila */ .magenta { color: hsl(300, 100%, 50%); } /* 300° = Magenta */ /* Világosság változtatása (ugyanaz a szín) */ .sotet { color: hsl(210, 100%, 20%); } /* Sötét kék */ .normal { color: hsl(210, 100%, 50%); } /* Normál kék */ .vilagos { color: hsl(210, 100%, 80%); } /* Világos kék */ /* Telítettség változtatása */ .telitett { color: hsl(210, 100%, 50%); } /* Élénk kék */ .halvany { color: hsl(210, 50%, 50%); } /* Halványabb kék */ .szurkes { color: hsl(210, 0%, 50%); } /* Szürke (nincs telítettség) */ /* HSLA átlátszósággal */ .atlatszo-kek { color: hsla(210, 100%, 50%, 0.5); } /* HSL előnye: könnyű variációkat készíteni */ :root { --primary-hue: 210; --primary: hsl(var(--primary-hue), 100%, 50%); --primary-light: hsl(var(--primary-hue), 100%, 70%); --primary-dark: hsl(var(--primary-hue), 100%, 30%); }`

#### Élő példa - HSL és HSLA színek:

Színkör (Hue: 0°-360°):

0° 30° 60° 120° 180° 240° 270° 300°

Világosság (Lightness) - ugyanaz a szín (210°):

20% 35% 50% 65% 80%

Telítettség (Saturation) - ugyanaz a szín (210°):

100% 75% 50% 25% 0%

HSLA átlátszóság:

alpha: 1 alpha: 0.75 alpha: 0.5 alpha: 0.25

### Színformátumok összehasonlítása

Formátum | Szintaxis | Előny | Használat
--- | --- | --- | ---
Névszín | `red` | Olvasható | Gyors prototípus
HEX | `#ff5500` | Kompakt, elterjedt | Legtöbb esetben
RGB/RGBA | `rgba(255,85,0,0.5)` | Átlátszóság kezelése | Overlay, árnyékok
HSL/HSLA | `hsl(20,100%,50%)` | Intuitív variációk | Színsémák, témák

## Szöveg- és háttérszín EMELT SZINT

A két leggyakrabban használt szín tulajdonság a `color` (szövegszín) és a `background-color` (háttérszín).

CSS - color és background-color
`/* Szöveg színe */ h1 { color: #333; /* Sötétszürke szöveg */ } p { color: #666; /* Világosabb szürke bekezdések */ } a { color: #007bff; /* Kék linkek */ } /* Háttérszín */ body { background-color: #f5f5f5; /* Világosszürke háttér */ } header { background-color: #333; /* Sötét fejléc */ color: white; /* Fehér szöveg a fejlécben */ } .kartya { background-color: white; color: #333; } /* Hover effekt */ .gomb { background-color: #007bff; color: white; } .gomb:hover { background-color: #0056b3; /* Sötétebb kék hover-re */ } /* Kijelölés színe */ ::selection { background-color: #007bff; color: white; }`

#### Élő példa - Szöveg- és háttérszín:

Szöveg színe (color):

# Címsor - color: #333

Bekezdés szövege - color: #666

Link szöveg - color: #007bff

Háttérszín (background-color):

body: #f5f5f5
header: #333 + fehér szöveg
.kartya: white

Hover effekt (vidd fölé az egeret):

::selection (jelöld ki ezt a szöveget):

Jelöld ki ezt a szöveget az egérrel, hogy lásd a ::selection hatását!

#### Kontraszt és olvashatóság

- WCAG ajánlás: Minimum 4.5:1 kontraszt arány normál szöveghez
- Nagy szöveg: Minimum 3:1 kontraszt (18px+ vagy 14px+ félkövér)
- Eszközök: WebAIM Contrast Checker, Chrome DevTools
- Tipp: Kerüld a tiszta feketét (#000) fehér háttéren - túl erős kontraszt

## Háttérképek BÓNUSZ

A CSS lehetővé teszi képek háttérként való használatát, részletes kontrollt biztosítva a méret, pozíció és ismétlődés felett.

#### Idézőjelek használata CSS-ben

A CSS-ben az `url()` függvényen belül az útvonalat egyszeres idézőjelbe (`'`) tesszük, nem dupla idézőjelbe (`"`). Ez azért fontos, mert ha a CSS-t HTML attribútumban (pl. `style=""`) írjuk, a dupla idézőjel ütközne a HTML szintaxissal.

Helyes: `background-image: url('images/kep.jpg');`

### background-image - Háttérkép beállítása

CSS - background-image
`/* Alapvető háttérkép */ .hero { background-image: url('images/hero-bg.jpg'); } /* Relatív útvonal */ .section { background-image: url('../images/pattern.png'); } /* Abszolút URL */ .banner { background-image: url('https://example.com/image.jpg'); } /* Több háttérkép (rétegezve) */ .layered { background-image: url('images/overlay.png'), /* Felső réteg */ url('images/background.jpg'); /* Alsó réteg */ }`

#### Élő példa - background-image:

background-image: url('...')
Gradiens overlay
+ háttérkép

### background-size - Háttérkép mérete

CSS - background-size
`/* Automatikus (eredeti méret) */ .bg1 { background-size: auto; } /* Fix méret */ .bg2 { background-size: 200px 100px; /* szélesség magasság */ } /* Százalékos méret */ .bg3 { background-size: 50% 50%; } /* cover - Kitölti a teljes területet (levághat) */ .hero { background-image: url('hero.jpg'); background-size: cover; /* Leggyakrabban használt nagy képekhez */ } /* contain - Teljes kép látható (üres hely maradhat) */ .logo-bg { background-image: url('logo.png'); background-size: contain; }`

#### Élő példa - background-size:

auto
cover
contain

### background-position - Háttérkép pozíciója

CSS - background-position
`/* Kulcsszavakkal */ .bg1 { background-position: top left; } .bg2 { background-position: top center; } .bg3 { background-position: top right; } .bg4 { background-position: center left; } .bg5 { background-position: center center; } /* vagy csak: center */ .bg6 { background-position: center right; } .bg7 { background-position: bottom left; } .bg8 { background-position: bottom center; } .bg9 { background-position: bottom right; } /* Százalékkal */ .bg10 { background-position: 50% 50%; } /* Középen */ .bg11 { background-position: 0% 0%; } /* Bal felső */ .bg12 { background-position: 100% 100%; } /* Jobb alsó */ /* Pixelekkel */ .bg13 { background-position: 20px 30px; } /* 20px balról, 30px fentről */ /* Kombinálva */ .bg14 { background-position: right 20px bottom 10px; }`

#### Élő példa - background-position:

top left
top center
top right
center left
center
center right
bottom left
bottom center
bottom right

### background-repeat - Háttérkép ismétlődése

CSS - background-repeat
`/* Ismétlődés mindkét irányba (alapértelmezett) */ .pattern { background-image: url('pattern.png'); background-repeat: repeat; } /* Nincs ismétlődés */ .hero { background-image: url('hero.jpg'); background-repeat: no-repeat; } /* Csak vízszintesen */ .divider { background-image: url('line.png'); background-repeat: repeat-x; } /* Csak függőlegesen */ .sidebar-bg { background-image: url('stripe.png'); background-repeat: repeat-y; } /* Space - egyenletes elosztás levágás nélkül */ .spaced { background-repeat: space; } /* Round - méretezve, hogy pontosan kitöltse */ .rounded { background-repeat: round; }`

#### Élő példa - background-repeat:

repeat
no-repeat
repeat-x
repeat-y

### background-attachment - Háttér rögzítése

CSS - background-attachment
`/* Görget a tartalommal (alapértelmezett) */ .normal { background-attachment: scroll; } /* Rögzített háttér (parallax effekt) */ .parallax { background-image: url('bg.jpg'); background-attachment: fixed; background-size: cover; background-position: center; } /* Rögzített az elem belsejéhez */ .local { background-attachment: local; /* Textarea-nál hasznos */ }`

### background - Rövidített forma

CSS - background shorthand
`/* Rövidített szintaxis */ /* background: color image position/size repeat attachment; */ /* Teljes hero szekció egy sorban */ .hero { background: #333 url('hero.jpg') center/cover no-repeat fixed; } /* Egyszerűbb változat */ .kartya { background: white url('icon.png') 10px center no-repeat; } /* Csak szín */ .section { background: #f5f5f5; } /* Több réteg rövidítve */ .layered { background: url('overlay.png') center/cover no-repeat, linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('photo.jpg') center/cover no-repeat; }`

## Gradiens hátterek BÓNUSZ

A CSS gradiensek színátmeneteket hoznak létre képek nélkül. Két fő típus létezik: lineáris és radiális.

### linear-gradient() - Lineáris gradiens

CSS - linear-gradient
`/* Alapvető gradiens (fentről lefelé) */ .gradient1 { background: linear-gradient(#ff5500, #007bff); } /* Irány megadása */ .gradient2 { background: linear-gradient(to right, #ff5500, #007bff); /* Balról jobbra */ } .gradient3 { background: linear-gradient(to bottom right, #ff5500, #007bff); /* Átlós */ } /* Fokkal megadott irány */ .gradient4 { background: linear-gradient(45deg, #ff5500, #007bff); /* 45 fokos szög */ } .gradient5 { background: linear-gradient(90deg, #ff5500, #007bff); /* Vízszintes */ } .gradient6 { background: linear-gradient(180deg, #ff5500, #007bff); /* Függőleges (alapértelmezett) */ } /* Több szín */ .rainbow { background: linear-gradient( 90deg, red, orange, yellow, green, blue, purple ); } /* Színek pozíciója megadva */ .gradient7 { background: linear-gradient( 90deg, #ff5500 0%, /* Narancs az elején */ #ff5500 30%, /* Narancs 30%-ig */ #007bff 70%, /* Kék indul 70%-nál */ #007bff 100% /* Kék a végén */ ); } /* Éles átmenet (csíkok) */ .stripes { background: linear-gradient( 90deg, #ff5500 50%, #007bff 50% ); }`

#### Élő példa - Lineáris gradiensek:

### radial-gradient() - Radiális (körkörös) gradiens

CSS - radial-gradient
`/* Alapvető radiális gradiens (középről) */ .radial1 { background: radial-gradient(#ff5500, #007bff); } /* Alakzat megadása */ .radial2 { background: radial-gradient(circle, #ff5500, #007bff); /* Kör */ } .radial3 { background: radial-gradient(ellipse, #ff5500, #007bff); /* Ellipszis (alapértelmezett) */ } /* Pozíció megadása */ .radial4 { background: radial-gradient(circle at top left, #ff5500, #007bff); } .radial5 { background: radial-gradient(circle at 30% 70%, #ff5500, #007bff); } /* Méret */ .radial6 { background: radial-gradient(circle closest-side, #ff5500, #007bff); } .radial7 { background: radial-gradient(circle farthest-corner, #ff5500, #007bff); } /* Spotlight effekt */ .spotlight { background: radial-gradient( circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 60% ); }`

#### Élő példa - Radiális gradiensek:

### Gradiensek kombinálása

CSS - Gradiens kombinációk
`/* Gradiens + kép overlay */ .hero-overlay { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('hero.jpg') center/cover; } /* Gradiens szövegszínként */ .gradient-text { background: linear-gradient(90deg, #ff5500, #007bff); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ismétlődő gradiens (csíkok) */ .stripes { background: repeating-linear-gradient( 45deg, #ff5500, #ff5500 10px, #007bff 10px, #007bff 20px ); } /* Modern gomb gradiens */ .fancy-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 12px 24px; border-radius: 25px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .fancy-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }`

## Opacity - Átlátszóság EMELT SZINT

Az `opacity` tulajdonság a teljes elem átlátszóságát állítja (0-1 között).

CSS - opacity
`/* Opacity értékek */ .elem1 { opacity: 1; } /* Teljesen látható (alapértelmezett) */ .elem2 { opacity: 0.75; } /* 75% látható */ .elem3 { opacity: 0.5; } /* 50% látható */ .elem4 { opacity: 0.25; } /* 25% látható */ .elem5 { opacity: 0; } /* Teljesen átlátszó (de helyet foglal!) */ /* Hover effekt */ .kartya { opacity: 0.8; transition: opacity 0.3s; } .kartya:hover { opacity: 1; } /* Letiltott elem */ .disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }`

#### Élő példa - Opacity értékek:

opacity: 1
100% látható
opacity: 0.75
75% látható
opacity: 0.5
50% látható
opacity: 0.25
25% látható
opacity: 0
0% (rejtett)

#### opacity vs rgba - Fontos különbség!

- opacity: A teljes elem (és gyerekei) átlátszóak lesznek
- rgba/hsla: Csak az adott szín átlátszó, a tartalom nem
- Tipp: Háttérszín átlátszóságához használj rgba-t, ne opacity-t!

CSS - opacity vs rgba különbség
`/* ❌ ROSSZ: opacity - a szöveg is átlátszó lesz */ .overlay-rossz { background-color: black; opacity: 0.5; color: white; /* Ez is 50% átlátszó lesz! */ } /* ✅ JÓ: rgba - csak a háttér átlátszó */ .overlay-jo { background-color: rgba(0, 0, 0, 0.5); color: white; /* Ez 100% látható marad */ }`

#### Élő példa - opacity vs rgba különbség:

❌ opacity: 0.5

Ez a szöveg is halvány!
A teljes elem átlátszó

✅ rgba(0,0,0,0.5)

Ez a szöveg élesen látszik!
Csak a háttér átlátszó

## Gyakorlati példa: Hero szekció EMELT SZINT

Alkalmazzuk az eddig tanultakat egy modern hero szekció létrehozásához:

index.html
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hero szekció példa</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="hero"> <div class="hero-content"> <h1>Üdvözlünk az Elit Hardvernél!</h1> <p>Prémium számítógép alkatrészek egy helyen</p> <a href="#" class="hero-btn">Termékek böngészése</a> </div> </section> </body> </html>`
style.css
`/* Hero szekció */ .hero { /* Háttérkép fekete overlay-jel */ background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('images/hero-bg.jpg') center/cover no-repeat; /* Méret és elrendezés */ min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; } /* Hero tartalom */ .hero-content { color: white; max-width: 600px; padding: 20px; } /* Főcím - opacity használata a szövegen */ .hero h1 { font-size: 3rem; margin-bottom: 1rem; opacity: 0.95; /* Enyhén átlátszó szöveg */ } /* Alcím - még halványabb */ .hero p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.8; /* Halványabb szöveg */ } /* Gomb */ .hero-btn { display: inline-block; background: white; color: #333; padding: 15px 30px; text-decoration: none; border-radius: 30px; font-weight: bold; transition: all 0.3s ease; } /* Gomb hover - átlátszó háttér */ .hero-btn:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }`

#### Élő példa - Hero szekció:

# Üdvözlünk az Elit Hardvernél!

Prémium számítógép alkatrészek egy helyen

Termékek böngészése

## Összefoglalás

Ebben a cikkben megismerkedtél a CSS színek és hátterek kezelésével:

- Színformátumok: névszínek, HEX, RGB/RGBA, HSL/HSLA
- Szöveg és háttérszín: color, background-color
- Háttérképek: background-image, size, position, repeat, attachment
- Gradiensek: linear-gradient(), radial-gradient()
- Átlátszóság: opacity vs rgba különbsége

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a színeket és háttereket:

- Főoldal - Hero szekció gradiens overlay-jel
- Processzor oldal - Termékkártyák háttérszínnel és árnyékkal
- Blog oldal - Info-boxok színes háttérrel

#### Következő lépések

Kísérletezz a színekkel: próbálj ki különböző gradiens kombinációkat, és figyeld meg a kontraszt hatását az olvashatóságra!

Következő cikk: Szövegformázás - Ismerd meg a betűtípusokat, a font tulajdonságokat és a szöveg stílusozás lehetőségeit!