A CSS használata háttérkép beállításához

• Április 25, 2024

Gondolkozott már azon, hogy a weboldalak hogyan kezelik azokat a csinos mintákat és képeket, amelyek a szöveg mögött lebegnek? Mindez a lépcsőzetes stíluslapok varázslatán keresztül történik. A CSS nem csak lehetővé teszi egy kép kijelölését az oldal háttéréhez, hanem azt is, hogy finomítsa a kép megjelenítésének módját - így csak a kívánt megjelenést kaphatja meg.

A háttérkép alapvető építőeleme, megfelelő módon, a 'háttérkép' tulajdonság. Ezzel a tulajdonsággal az alábbiak szerint megmondhatja webhelyének, ahol található a képfájl:

test {
háttérkép: url ("image.gif");
}

Ehhez csak annyit kell tennie, hogy háttérképét elhelyezi a weboldalán. Természetesen valószínűleg testreszabja a kép megjelenését. Tegyük fel, hogy azt akarja, hogy a kép az oldal tetején kezdjen, hanem vízszintesen legyen középen, a balra igazítás helyett (az alapértelmezett igazítás). Ebben az esetben hozzá kell adnia a 'háttér-helyzet' tulajdonságot a CSS-szabályhoz:

test {
háttérkép: url ("image.gif");
háttér-helyzet: középső felső;
}

A „háttér-helyzet” tulajdonság meghatározásakor az első érték beállítja a vízszintes igazítást (bal, közép vagy jobb), a második pedig a kép függőleges igazítását (felső, középső vagy alsó).

Ezután úgy dönt, hogy meg akarja állítani a képet, hogy vízszintesen csempézzen (ismétlődjön), bár szeretné, hogy függőlegesen mozogjon. Ideje előhozni a 'háttér-ismétlés' tulajdonságot:

test {
háttérkép: url ("image.gif");
háttér-helyzet: középső felső;
háttér-ismétlés: ismétlés-y;
}

Ha az értéket 'ismétlés-y' -re állítja, akkor a böngésző a háttérképet az y tengely mentén csempézi, más néven függőlegesen, de nem az x tengelyt (vízszintesen), és pontosan ezt akartuk. Ha vízszintesen, de nem függőlegesen szeretné ragasztani, akkor az 'atkārto x' értéket használja; Ha egyáltalán nem akarta, hogy a kép csempézzen, akkor adja meg a „nem ismételje meg” értéket. Az alapértelmezett érték a kép mozgatása vízszintesen és függőlegesen egyaránt, így ha ez a legjobb választás a képhez, akkor egyáltalán nem kell beállítania a "háttér-ismétlés" tulajdonságot.

Végül átnézheti a „háttér-melléklet” tulajdonságot. Alapértelmezés szerint a kép az oldal görgetésével gördül, tehát ha nem ismételje meg a képet függőlegesen, és hosszú oldalad van, akkor a kép nem terjed ki az oldal aljára. Ezt megváltoztathatja úgy, hogy a 'háttér-melléklet' tulajdonságot 'rögzített' értékre állítja, amely miatt a háttérkép ugyanazon a helyen marad a monitoron, függetlenül az oldal görgetésének módjától. A háttérkép szabályai így néznek ki:

test {
háttérkép: url ("image.gif");
háttér-helyzet: középső felső;
háttér-ismétlés: ismétlés-y;
háttér-rögzítés: rögzített;
}


Ha azt szeretné, hogy a CSS-szabályok a lehető legkisebbek maradjanak, az összes háttér-értéket egyetlen sorba egyesítheti a „háttér” tulajdonság használatával, így:

háttér {
url ("image.gif") ismétlés-y rögzített középső tetején;
}

A 'háttér' tulajdonság használatakor az értékeket meghatározott sorrendben kell felsorolnia:
[háttérszín (ha van)] [háttér-kép] [háttér-ismétlés] [háttér-melléklet] [háttér-helyzet]. Bármelyik értéket elhagyhatja, amelyre nincs szüksége, csak fel kell sorolnia azokat az értékeket, amelyeket helyes sorrendben használ, különben a szabály nem fog működni.

Video Utasításokat: Dátumok megjelenítése formázása, háttér színe és CSS (Április 2024).