Végezze el a technikát a CSS segítségével
Ha weboldalt tervezel, érdemes lehet megtudni, hogyan hozhat létre egy rögzített háttérképet vagy vízjelet egy weboldalon. Ez egy olyan közös formatervezés, amely már jó ideje népszerű online. Ez egy praktikus hatás, hogy a webes design táska trükkök.
Ha még nem tette ezt meg, vagy próbálta meg korábban szerencsével, a folyamat félelmetesnek tűnhet, de egyáltalán nem túl nehéz. Ezzel a rövid ismertetővel a CSS segítségével percek alatt megkaphatja az információkat, amire szüksége van a technika elsajátításához.
Elkezdeni
A háttérképek vagy vízjelek (amelyek csak nagyon könnyű háttérképek) nyomtatott formában vannak. A dokumentumok sokáig tartalmazták a vízjeleket, hogy megakadályozzák a másolást. Emellett sok szórólap és prospektus nagyméretű háttérképeket használ a nyomtatott darab designjának részeként. A webes tervezés hosszú ideig kölcsönözte a stílusokat a nyomtatásból, és a háttérképek egyike a kölcsönzött stílusoknak.
Ezek a nagy háttérképek egyszerűen létrehozhatók a következő három CSS-stílusú tulajdonsággal:
- háttérkép
- background-repeat
- háttér-attachment
- background-size
Háttérkép
A háttérkép segítségével meghatározhatja a vízjelként használt képet. Ez a stílus egyszerűen egy fájl elérési útvonalát használja a webhelyén lévő kép betöltéséhez, valószínűleg egy "képek" nevű könyvtárban.
háttér-kép: url (/images/page-background.jpg);
Fontos, hogy a kép maga is könnyebb vagy átlátszóbb legyen, mint egy normál kép. Ez létrehozza azt a "vízjel" megjelenést, amelyben félig átlátszó kép található a szöveg, a grafika és a weboldal egyéb fő elemei mögött. E lépés nélkül a háttérkép versenyezni fog az oldalad információival, és megnehezíti az olvasást.
Beállíthatja a háttérképet bármely szerkesztési programban, például az Adobe Photoshop programban.
Background-repeat
A háttér-ismétlés tulajdonsága a következő. Ha azt szeretné, hogy a kép nagyméretű vízjel-stílusú grafika legyen, akkor ezt a tulajdonságot használva a kép csak egyszer jelenik meg.
háttér-ismétlés: nem-ismétlés;
A "no-repeat" tulajdonság nélkül az alapértelmezés szerint a kép újra és újra megismétlődik az oldalon. Ez nemkívánatos a legtöbb modern weboldal tervezésében, ezért ezt a stílust a CSS-ben elengedhetetlennek kell tekinteni.
Background-attachment
A háttér-csatolás olyan tulajdonság, amelyet sok webes tervező elfelejt. Ennek használatával a háttérben rögzített kép rögzítve marad a "fix" tulajdonság használatakor. Ez az, ami ezt a képet olyan vízjelévé alakítja, amelyet az oldal rögzített.
A tulajdonság alapértelmezett értéke "görgetés". Ha nem ad meg hátteret csatoló értéket, akkor a háttér az oldal többi részével együtt gördül.
háttér-csatolás: fix;
Háttér-Size
A háttérméret egy újabb CSS-tulajdonság. Lehetővé teszi a háttér méretének beállítását a megtekintett nézetablak alapján. Ez nagyon hasznos olyan érzékeny weboldalak számára , amelyek különböző méretű megjelenítésre kerülnek a különböző eszközökön .
háttérméret: borító;
Két hasznos érték használható ehhez a tulajdonsághoz:
- Fedél - A háttérképet méretezi, így a teljes szélesség vagy a teljes magasság jelenik meg. Ez azt jelenti, hogy a kép egyes részei nem jelennek meg a képernyőn, hanem az egész területet lefedik.
- Tartalom - A kép mérete, így a teljes szélesség és a magasság látható a stílusban. A kép nincs levágva, de a hátránya, hogy a terület egyes részeit nem fedheti le a kép.
A CSS hozzáadása az Ön oldalához
Miután megértette a fenti tulajdonságokat és azok értékeit, ezeket a stílusokat hozzáadhatja webhelyéhez.
Adja hozzá az alábbiakat a weboldal HEAD-hoz, ha egyoldalas webhelyet készít. Adja hozzá egy külső stíluslap CSS stílusaihoz, ha több oldalas oldalt épít, és szeretné kihasználni egy külső lap teljesítményét.