Stílusozzon képeket és használjon képeket stílusokban
Sokan használják a CSS-t a szöveg módosításához, a betűtípus, a szín, a méret és így tovább. De az egyik dolog, amit sokan gyakran elfelejtenek, az, hogy a CSS-t is használhatja a képekkel.
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 oldalainak konzisztenciájának fenntartásához. Az összes kép stílusának beállításával szabványos képet készíthet a képeiről. Néhány dolog, amit tehet:
- Adjon hozzá egy szegélyt vagy körvonalat a képek körül
- Távolítsa el a színes szegélyt a kapcsolódó képek körül
- A képek szélességének és / vagy magasságának beállítása
- Adjon hozzá egy csepp árnyékot
- Forgassa el a képet
- Módosítsa a stílusokat, amikor a kép fölött lebeg
Ha a képedet határoznod meg, remek kiindulópont. De ne csak a határt vegye figyelembe, hanem a kép teljes szélét, és módosítsa a margókat és a párnázást is. A vékony fekete szegélyű kép szépnek tűnik, de a szegély és a kép közötti párnázás még jobban kinézhet.
img {
szegély: 1px tömör fekete;
párnázottság: 5px;
}
Jó ötlet, hogy mindig kapcsolja össze a nem dekoratív képeket , ha lehetséges. De ha igen, ne feledje, hogy a legtöbb böngésző színes szegélyt ad a kép körül. Még akkor is, ha a fenti kódot használja a határ módosításához, a hivatkozás felülbírálja azt, hacsak nem távolítja el vagy nem módosítja a linken lévő határt. Ehhez egy CSS gyermekszabályt kell használnia, hogy eltávolíthassa vagy megváltoztathatja a kapcsolódó képeket a kapcsolódó képeken:
img> a {
határ: nincs;
}
A CSS használatával módosíthatja vagy beállíthatja a képek magasságát és szélességét. Bár nem jó ötlet a böngésző használatához a képméretek letöltési sebesség miatt történő beállításához, sokkal jobbak a képek átméretezésénél, hogy még mindig jól néznek ki. És a CSS segítségével beállíthatja, hogy a képek mindegyike szabványos szélesség vagy magasság legyen, vagy akár a méretet is a konténerhez viszonyítva határozza meg.
Ne feledje, hogy amikor átméretezi a képeket, a legjobb eredmény érdekében csak egy dimenziót kell méreteznie - a magasságot vagy a szélességet. Ez azt jelenti, hogy a kép megtartja a képarányát, és így nem tűnik furcsának. Állítsa be a másik értéket automatikus vagy hagyja ki, hogy megmondja a böngészőnek, hogy a képarány konzisztens maradjon.
img {
szélesség: 50%;
magasság: automata;
}
A CSS3 megoldást kínál erre a problémára az új objektumok objektum-illesztési és objektum-helyzetével. Ezekkel a tulajdonságokkal meghatározhatja a kép pontos magasságát és szélességét, valamint a képarány kezelésének módját. Ez létrehozhat letterboxing hatásokat a képek körül vagy a vágás során, hogy a kép megfeleljen a szükséges méretnek.
Bár a CSS3 objektum-illesztési és objektum-pozíció tulajdonságai még nem széles körben támogatottak, vannak olyan CSS3 tulajdonságok is, amelyek jól támogatottak a legtöbb modern böngészőben, amellyel a képeket módosíthatja. Az olyan dolgok, mint az árnyékok, a lekerekített sarkok és a képek forgatásához, elhajlásához vagy mozgatásához szükséges átalakítások mind a mai napig működnek a legtöbb modern böngészőben. Ezután a CSS átmenetek használatával módosíthatja a képeket, amikor lebegnek, vagy kattintanak, vagy csak egy idő után.
Képek használata háttérképként
A CSS segítségével könnyedén létrehozhat képzeletbeli háttereket a képekkel.
Háttéreket adhat az egész oldalhoz vagy csak egy adott elemhez. Könnyű háttérképet készíteni az oldalon a háttérkép tulajdonsággal:
test {
háttér-kép: url (background.jpg);
}
Módosítsa a testválasztót az adott elemre az oldalra, hogy háttérbe helyezze egyetlen elemet.
Egy másik szórakoztató dolog, ami a képekhez köthető, olyan háttérképet hoz létre, amely nem gördül az oldal többi részével - például egy vízjel. Csak használja a stílus hátterét: fix; a háttérképével együtt. A hátterek más lehetőségei közé tartozik a vízszintes vagy függőleges helyzetű csempék készítése a háttér-ismétlődő tulajdonság használatával.
Write background repeat: repeat-x; a kép vízszintes és háttérkép ismétléséhez: repeat-y; függőlegesen csempézni. Beállíthatja háttérképét a háttérpozíció tulajdonsággal.
A CSS3 pedig több stílusot is hozzáad a hátteréhez. A képeket bármilyen méretű hátterhez igazíthatja, vagy állíthatja be a háttérkép méretét az ablak méretével . Megváltoztathatja a pozíciót, majd kimeheti a háttérképet. De a CSS3 egyik legjobb dologja az, hogy most több háttérképet is rétegezhet még bonyolultabb hatások létrehozására.
A HTML5 segíti a stílust
A HTML5 Ábra elemét olyan dokumentumra kell elhelyezni, amely egyedülálló lehet a dokumentumban. Ennek egyik módja, ha a kép egy függelékben jelenik meg, akkor az FIGURE elem belsejében kell lennie. Ezt követően az elemet és a FIGCAPTION elemet hozzáadhatja stílusokhoz a képekhez.