Sokan használják CSS a szöveg beállításához, a betűtípus, a szín, a méret és egyebek megváltoztatásához. De egy dolog, amit sokan gyakran elfelejtenek, az az, hogy a CSS-t képekkel is használhatja.
A kép megváltoztatása
A CSS segítségével beállíthatja, hogy a kép hogyan jelenjen meg az oldalon. Ez nagyon hasznos lehet az oldalai konzisztenciájának megőrzéséhez. Az összes kép stílusának beállításával normál megjelenést hoz létre a képein. Néhány dolog, amit tehet:
- Szegélyt vagy körvonalat adjon a képek köré
- Távolítsa el a színes szegélyt a kapcsolt képek körül
- A képek szélességének és / vagy magasságának beállítása
- Adjon hozzá egy árnyékot
- Forgassa el a képet
- Módosítsa a stílusokat amikor a kép fölött lebeg
A kép határának megadása nagyszerű hely a kezdéshez. De nem csak a szegélyt kell figyelembe vennie - gondoljon végig a kép teljes szélén, és állítsa be a margókat és párnázás is. A vékony fekete szegéllyel rendelkező kép szépen néz ki, de a szegély és a kép közé némi betét hozzáadása még jobban kinézhet.
Jó ötlet mindig linkelje a nem dekoratív képeket, amikor lehetséges. De amikor megteszi, ne feledje, hogy a legtöbb böngésző színes szegélyt ad a kép köré. Még akkor is, ha a fenti kódot használja a határ megváltoztatására, a hivatkozás felülírja ezt, hacsak nem távolítja el vagy nem változtatja meg a hivatkozás határát sem. Ehhez CSS gyermekszabályt kell használnia a linkelt képek körüli szegély eltávolításához vagy módosításához:
A CSS segítségével módosíthatja vagy beállíthatja a képek magasságát és szélességét. Bár a letöltési sebesség miatt nem jó ötlet a böngészőt használni a képméret beállításához, sokkal jobbak a képek átméretezésében, hogy így is jól nézzen ki. A CSS segítségével pedig beállíthatja, hogy a képek mindegyike szabványos szélességű vagy magasságú legyen, vagy akár a méreteket is beállíthatja a tárolóhoz viszonyítva.
Ne feledje, hogy a képek átméretezésekor a legjobb eredmény elérése érdekében csak egy dimenziót kell átméreteznie - a magasságot vagy a szélességet. Ez biztosítja, hogy a kép megtartsa a képarányát, és így nem néz ki furcsának. Állítsa a másik értéket auto vagy hagyja ki, hogy mondja meg a böngészőnek, hogy tartsa a képarányt állandó.
A CSS3 megoldást kínál erre a problémára az új tulajdonságokkal tárgy-illeszkedés és tárgy-helyzet. Ezekkel a tulajdonságokkal megadhatja a pontos képmagasságot és szélességet, valamint a képarány kezelésének módját. Ez levélbetétes effektusokat hozhat létre a képek körül, vagy levághatja, hogy a kép a kívánt méretbe illeszkedjen.
Vannak más CSS3 tulajdonságok, amelyeket a legtöbb böngésző jól támogat, és amelyekkel a képeket is módosíthatja. Az olyan dolgok, mint az árnyékok, a lekerekített sarkok és a képek elforgatásához, ferdítéséhez vagy mozgatásához szükséges átalakítások, a legtöbb modern böngészőben jelenleg működnek. Ezután CSS átmenetekkel megváltoztathatja a képeket, amikor az egér fölé viszi az egeret, vagy rákattint, vagy csak egy bizonyos idő után.
Képek használata háttérként
A CSS megkönnyíti a képekkel díszes háttérképek létrehozását. tudsz adjon hozzá háttereket az egész oldalhoz vagy csak egy meghatározott elemre. Könnyű háttérképet készíteni az oldalon a háttérkép ingatlan:
Változtasd meg a test válasszon egy adott elemet az oldalon, hogy a háttér csak egy elemre kerüljön.
Egy másik szórakoztató dolog, amelyet a képekkel tehet, olyan háttérkép létrehozása, amely nem gördül az oldal többi részével - például vízjel. Csak használd a stílust háttér-rögzítés: rögzített; háttérképével együtt. A háttér egyéb lehetőségei közé tartozik, hogy vízszintesen vagy függőlegesen csempézi őket a háttérismétlés ingatlan. Ír háttérismétlés: ismétlés-x; a képet vízszintesen csempézni és háttérismétlés: ismétlés-y; függőlegesen csempézni. És elhelyezheti a háttérképét a háttér-helyzet ingatlan.
És a CSS3 több stílust ad hozzá a hátteréhez is. A képeket bármilyen méretű háttérbe illesztheti, vagy beállíthatja, hogy a háttérkép méretezzen az ablak méretével. Megváltoztathatja a pozíciót, majd levághatja a háttérképet. De az egyik legjobb dolog a CSS3-ban, hogy több háttérképet is rétegezhet, így még bonyolultabb effektusokat hozhat létre.
A HTML5 segíti a stílusstílusokat
A ÁBRA A HTML5 elemet el kell helyezni minden olyan kép körül, amely önállóan állhat a dokumentumban. Az egyik gondolkodásmód az, ha a kép megjelenhet egy függelékben, akkor a képen belül kell lennie ÁBRA elem. Ezután használhatja azt az elemet és a FIGCAPTION elem stílusok hozzáadásához a képekhez.