Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
Používaním tejto stránky súhlasíte s používaním cookies.
Hľadanie
Rozšírené vyhľadávanie
TOP 7 - stránky
Napaľovacie programy - 104 969x
Free Pascal - Úvod - 59 080x
Free Pascal - Začiatky - 38 813x
Lazarus - Kreslenie - 36 781x
Internetové prehliadače - 32 371x
3D grafické programy - 31 652x
Free Pascal - Podmienky - 30 305x
Nové v diskusii
Free Pascal - Cykly - štvrtok 31.3.
Lazarus - Začíname - piatok 25.3.
Anketa - streda 2.3.
Navigácia: Tvorba Webu > CSS - Pozadie a farby

CSS - Pozadie a farby

Je samozrejmé, že CSS obsahuje viac možností pre prácu s farbami a pozadím internetových stránok ako HTML.

Farba textu

Názov vlastnosti: color

Určuje farbu písmen (nie ich pozadia). Hodnotou je zápis farby.

.modre {color: blue}
div {color: #0000FF}
modrý text

Farba pozadia

Názov vlastnosti: background-color

Tentoraz sa určuje farba pozadia nejakého elementu (body, span, tabuľka - table,...). Ako hodnotu zadávame farbu alebo TRANSPARENT (priehľadné, s pôvodnou farbou).

body {background-color: #1A2B3C}
.normalne {background-color: transparent}
.text {background-color: aqua}
farebné pozadie

Obrázok na pozadí

Názov vlastnosti: background-image

V pozadí elementu môže byť aj obrázok. Hodnotou vlastnosti je CSS zápis URL. Element bez obrázkového pozadia má predvolenú hodnotu none.

body {background-image: url('pozadie.png')}
.bodky {background-image: url("bodka.gif")}
text s obrázkom na pozadí

Opakovanie pozadia

Názov vlastnosti: background-repeat

Táto vlastnosť má význam, len ak je obrázok menší ako element. Pri neuvedení tejto vlastnosti sa obrázkové pozadie bude opakovať, aby sa rozkladalo po celej ploche elementu (hodnota repeat). Ak sa má opakovať vo vodorovnom smere, použijeme hodnotu repeat-x, ak v horizontálnom, repeat-y. Pokiaľ chceme zobraziť obrázok bez opakovania, hodnotou bude no-repeat.

a {
 background-image: url('bodka.png');
 background-repeat: repeat-x;
}
Toto je DIV,
ktorý má nastavené
background-repeat: repeat-x.
Obrázok sa teda opakuje
len vo vodorovnom smere.

Pripevnenie pozadia

Názov vlastnosti: background-attachment

Obrázok na pozadí stránky sa s ňou zvyčajne pohybuje (hodnota scroll). Dá sa však dosiahnuť, aby bolo pevne na tej istej pozícii aj pri scrollovaní. Nastavíme tejto vlastnosti hodnotu fixed. Odporúčam vyskúšať, je to zaujímavé, ale veľký praktický význam v tom nevidím.

body {
 background-image: url('bodka.png');
 background-repeat: no-repeat;
 background-attachment: fixed;
}

Pozícia pozadia

Názov vlastnosti: background-position

Udáva pozíciu obrázka v pozadí elementu na osi Y (zvisle) a X (vodorovne). Hodnotou je vzdialenosť od vrchu (top, center, bottom, dĺžka alebo percentá) + medzera + vzdialenosť od ľavého okraja (left, center, right, dĺžka alebo percentá).

div {
 background-image: url('bodka.png');
 background-repeat: no-repeat;
 background-position: top right;
}
#vlavo-dole {
 background-image: url('bodka.png');
 background-repeat: no-repeat;
 background-position: 100% 0%;
}

Súhrn

Názov vlastnosti: background

Všetky vlastnosti pozadia môžeme zapísať do jedinej vlastnosti. Tá má tvar:

nejaký-element {
 background: farba-pozadia obrázok-na-pozadí
 opakovanie-pozadia pripevnenie-pozadia
 pozícia-pozadia
}

Samozrejme, nemusia sa vždy uviesť všetky možnosti. Uvediem príklad.

body {background: url(b.jpg) no-repeat fixed}
Hodnotenie
1 2 3 4 5 (ako v škole)
Priemerná známka: 2,46
Diskusia k tejto stránke Zalomit by sa to dalo v PHP. V CSS sa da nastavit ...
Prejsť do diskusie»
2005-2012, Matúš Sulír, matus.sulir (zav) gmail bodka com. Gen.: 0,0656 s. Valid XHTML, CSS.