Ha te weboldal tervezése, érdekes lehet, hogy megtanulja, hogyan lehet rögzített háttérképet vagy vízjelet létrehozni egy weboldalon. Ez egy általános dizájnkezelés, amely már jó ideje népszerű az interneten. Ez egy praktikus hatás, hogy a web design zsákjában trükkök vannak.
Ha még nem tette meg ezt korábban, vagy korábban már nem próbálta meg szerencse nélkül, akkor a folyamat félelmetesnek tűnhet, de valójában egyáltalán nem túl nehéz. Ezzel a rövid bemutatóval percek alatt megkapja a technika elsajátításához szükséges információkat a CSS segítségével.
Elkezdeni
A háttérképeknek vagy a vízjeleknek (amelyek valójában csak nagyon világos háttérképek) története van a nyomtatott tervezésben. A dokumentumok már régóta tartalmaznak rajtuk vízjeleket, hogy megakadályozzák azok másolását. Ezenkívül sok szórólap és brosúra nagy háttérképeket használ a nyomtatott darab megtervezésének részeként. A webdesign már régóta kölcsönöz stílusokat a nyomtatásból, és a háttérképek egyike ezeknek a kölcsönzött stílusoknak.
Ezeket a nagy háttérképeket könnyű létrehozni a következő három segítségével CSS stílus tulajdonságok:
- háttérkép
- háttérismétlés
- háttér-kötődés
- háttérméret
Háttérkép
A háttérkép használatával meghatározhatja azt a képet, amelyet vízjelként fog használni. Ez a stílus egyszerűen egy fájl elérési útjával tölti be a webhelyén lévő képet, valószínűleg egy megnevezett könyvtárba képek.
háttérkép: url (/images/page-background.jpg);
Fontos, hogy maga a kép világosabb vagy átlátszóbb legyen, mint egy normál kép. Ez létrehozza eztvízjel"olyan megjelenés, amelyben egy félig átlátszó kép rejlik a weboldal szövege, grafikája és 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.
Bármely szerkesztő programban beállíthatja a háttérképet, például Adobe Photoshop.
Háttér-ismétlés
A háttérismétlés tulajdonság következik. Ha azt szeretné, hogy a kép egy nagy vízjel stílusú grafika legyen, akkor ezt a tulajdonságot használja arra, hogy a kép csak egyszer jelenjen meg.
háttérismétlés: nem ismétlés;
A nem ismételni tulajdonság, alapértelmezés szerint a kép újra és újra megismétlődik az oldalon. Ez a legtöbb modern weblaptervezésnél nem kívánatos, ezért ezt a stílust elengedhetetlennek kell tekinteni a CSS-ben.
Háttér-melléklet
A háttér-melléklet olyan tulajdonság, amelyet sok webdesigner elfelejt. Használatával rögzítve marad a háttérkép, amikor a rögzített ingatlan. Ez az, ami ezt a képet vízjelgé változtatja, amely rögzül az oldalon.
A tulajdonság alapértelmezett értéke: tekercs. Ha nem ad meg háttér-melléklet értéket, akkor a háttér az oldal többi részével együtt görget.
háttér-rögzítés: rögzített;
Háttér-méret
A Background-size 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 érzékeny weboldalak amelyek különböző méretben jelennek meg különböző eszközökön.
háttérméret: borító;
Két hasznos érték, amelyet ehhez a tulajdonsághoz használhat:
- Borító - A hátteret úgy méretezi, hogy a teljes szélessége vagy a teljes magassága megjelenjen. Ez azt jelenti, hogy a kép egyes részei nem jelennek meg a képernyőn, de a teljes területet lefedik.
- Tartalmaz - A képet úgy méretezi, hogy a teljes szélesség és magasság egyaránt megjelenjen a stílusban. A kép nincs levágva, de hátránya, hogy a terület egyes részeit nem fedheti le a kép.
A CSS hozzáadása az oldalához
Miután megértette a fenti tulajdonságokat és azok értékeit, felveheti ezeket a stílusokat a webhelyére.
Ha egyoldalas webhelyet készít, adja hozzá a következőket a weblapjának FEJHOZ. Adja hozzá egy külső stíluslap CSS-stílusaihoz, ha többoldalas webhelyet épít, és ki akarja használni a külső lap erejét.
Módosítsa a háttérkép URL-jét, hogy megfeleljen a webhelyének releváns fájlnévnek és fájlútvonalnak. Végezzen el bármilyen más megfelelő változtatást, hogy illeszkedjen a tervéhez is, és vízjelet kap.
Megadhatja a pozíciót is
Ha a vízjelet a weboldalának egy adott helyére szeretné helyezni, akkor ezt megteheti. Például érdemes a vízjelet az oldal közepére vagy esetleg az alsó sarkába állítani, szemben az alapértelmezett felső sarokkal.
Ehhez adja hozzá a background-position tulajdonságot a stílusához. Ez pontosan abban a helyen fogja elhelyezni a képet, amelyen szeretné megjeleníteni. Képpontértékeket, százalékokat vagy igazításokat használhat a pozicionálási hatás eléréséhez.
háttér-helyzet: közép;