Webové technológie

Poznámky:

6. Farby, pozadia, obrázkové pozadia

Možnosti zápisu farby:

Zápis farby kľúčovým slovom:

Hodnota Farba Hodnota Farba
aqua modroz-elená navy tmavo-modrá
black čierna olive olivová
blue modrá purple fialová
fuchsia purpurová red červená
gray šedá silver strieborná
green zelená teal tmavo modro-zelená
lime neonovo-zelená white biela
maroon gaštanová yellow žltá

Hexadecimálny zápis farby vo formáte RGB:

Zápis farby pomocou funkčnej notácie RGB:

background-color: rgb(255, 255, 0);

background-color: rgb(100%, 100%, 0);

Zápis farby vo formáte HSL:

background-color: hsl(0, 100%, 50%);


Vlastnosti pre definíciu pozadia:

background-color - Definovanie farby poziadia elementu.

background-image - Vloženie obrázka na pozadie elementu.
background-image: url(obrazok.gif)

background-repeat - Vlastnosť pre definíciu opakovania obrázka na pozadí.

  • no-repeat - bez opakovania, obrázok sa vykreslí iba 1-krát
  • repeat-x - obrázok sa bude opakovať po ose x (vodorovne)
  • repeat-y - obrázok sa bude opakovať po ose y (zvisle)

background-position - Vlastnosť pre definíciu pozicie obrázka od okrajov elementa. Uvedie sa pozícia x a y.

  • Hodnota slovom
    • left - zarovnanie k ľavému okraju
    • right - zarovnanie k pravému okraju
    • center - zarovnanie na stred
    • top - zarovnanie k hornému okraju
    • bottom - zarovnanie k dolnému okraju
  • Presná hodnota číslom v px
    • x y

background-attachment - Touto vlastnosťou s hodnotou fixed zakážeme posúvaniu obrázka s obsahom stránky (napr. na pozadí).

background-size - Táto vlastnosť určuje rozmery obrázku na pozadí. (CSS3)

background-clip - Touto vlastnosťou špecifikujeme v akej oblasti obsahového bloku elementa sa má naše pozadie vykresliť (CSS3). Môže nadobúdať 3 hodnoty:

  • border-box - pozadie sa vykreslí iba "na rámčeku".
  • padding-box - pozadie sa vykreslí iba v oblasti vnútorného okraja.
  • content-box - pozadie sa vykreslí iba v oblasti obsahu.

background-origin - Touto vlastnosťou určujeme, ku ktorému prvku obsahového bloku elementa má byť vlastnosť background-position umiestnená relatívne. (CSS3)

  • border-box - pozadie sa bude zarovnávať k rámčeku .
  • padding-box - pozadie sa bude zarovnávať k hrane vnútorného okraja.
  • content-box - pozadie sa bude zarovnávať k hrane obsahu.

Zjednodušený zápis pozadia:

Obrázok na pozadí nie je potrebné deklarovať pomocou mnohých rôznych vlastností, všetko sa dá zvládnuť jediným zápisom, a to združenou vlastnosťou background. Jej hodnotami potom budô hodnoty vlastností background-color, background-image, background-repeat, background-position i background-atachment

Príklad:

body { background: #CC0000 url(images/pozadie.jpg) no-repeat top center; }

Ako nastaviť priehľadnoť elementu:

Priehľadnosť elementu môžeme nastaviť pomocou vlastnosti opacity, ktorá funguje od verzie CSS3. Môže nadobúdať číselné hodnoty od 0 po 1. Táto vlastnosť sa dá využíť napríklad pri obrázkoch.

Priehľadné pozadie pomocou formátu RGBA: (CSS3)

Verzia CSS3 nám ponúka novú funkciu, pomocou ktorej dokážeme nastaviť farbu aj s alfa kanálom. Totiž do formátu RGB pribudla nová hodnota a tou je voľba priehľadnosti farby.

background-color: rgba(255, 0, 0, 0.3)

Hodnota alfa kanálu môže byť od 0 (úplná priehľadnosť) až po 1 (nepriehľadnosť) a nadobúda podobu desatinných čísel.

To isté platí aj pre formát HSL, čiže HSLA.

Novinky

11.9.2012Nová dómena ta3d.hys.cz Odkaz

15.6.2012Vyhotovené diskusné fórum. Odkaz

14.6.2012Poznámky z CSS sú hotové. Odkaz

Štatistiky