CSS: kép beszúrása - így működik
Ebben a gyakorlati tippben elmagyarázjuk, hogyan lehet egy képet beszúrni a CSS segítségével. Alapvetően a képeket itt csak háttérképek formájában lehet beilleszteni. Ez azonban elégséges.
Helyezze be a képet a CSS-be
Például, ha képet szeretne beilleszteni a fejlécbe CSS használatával, például a logóval, akkor nyilatkoztassa a következő tulajdonságokat a #header alatt:
- "háttér: url (image.webp) #FFFFFF;"
- Itt a "bild.webp" alatt a kép URL-jét kell érteni, akár a css fájlhoz viszonyítva, akár abszolút címként a meghajtón.
- A színnel kijelenti a háttér színét a webhelyén.
- A képet most pontos pozícióval lehet elhelyezni, például: "háttérpozíció: 100 képpont 100 képpont;" vagy az ablak széle által meghatározott relatív információk révén, mint például "háttér-helyzet: jobbra lent";
- Annak érdekében, hogy a képe nem ismétlődik meg folyamatosan, a "háttér-ismétlés" tulajdonság alatt megadhatja a "nem ismételje meg" lehetőséget. A következőképpen néz ki: "háttér-ismétlés: nem-ismétlés;".
- A "háttér-melléklet" tulajdonsággal meghatározhatja, hogy a kép a görgetéssel mozog-e vagy rögzített helyen marad-e az oldalon: "háttér-melléklet: rögzített;".
- A tulajdonságokat idézőjelek nélkül a CSS fájl határozza meg.
A következő gyakorlati tippben olvassa el, hogyan lehet a CSS-fájlt HTML segítségével integrálni.