Mnoho ľudí používa CSS upraviť text, zmeniť písmo, farbu, veľkosť a ďalšie. Ale jedna vec, na ktorú veľa ľudí často zabúda, je, že CSS môžete použiť aj s obrázkami.
Samotná zmena obrazu
CSS vám umožňuje upraviť spôsob zobrazenia obrázka na stránke. To môže byť naozaj užitočné pre zabezpečenie konzistentnosti vašich stránok. Nastavením štýlov na všetkých obrázkoch vytvoríte štandardný vzhľad svojich obrázkov. Niektoré z vecí, ktoré môžete urobiť:
- Pridajte orámovanie alebo obrys okolo obrázkov
- Odstráňte farebné orámovanie okolo prepojených obrázkov
- Úprava šírky a / alebo výšky obrázkov
- Pridajte vrhaný tieň
- Otočiť obrázok
- Zmeňte štýly keď je obrázok umiestnený
Ak chcete svojmu obrázku dať hranicu, je to skvelé miesto, kde začať. Mali by ste brať do úvahy nielen hranicu - myslite na celú hranu obrázka a upravte okraje a vypchávka tiež. Obrázok s tenkým čiernym okrajom vyzerá pekne, ale pridanie polstrovania medzi okraj a obrázok môže vyzerať ešte lepšie.
Je to dobrý nápad vždy odkazujte na obrázky bez dekorácie
, ak je to možné. Ale ak tak urobíte, nezabudnite, že väčšina prehliadačov pridáva okolo obrázka farebné orámovanie. Aj keď na zmenu orámovania použijete vyššie uvedený kód, odkaz ho prepíše, pokiaľ neodstránite alebo nezmeníte orámovanie tiež. Ak to chcete urobiť, mali by ste použiť podradené pravidlo CSS na odstránenie alebo zmenu orámovania okolo prepojených obrázkov:Pomocou CSS môžete tiež zmeniť alebo nastaviť výšku a šírku svojich obrázkov. Aj keď nie je skvelý nápad používať na prispôsobenie veľkostí obrázkov prehľadávač z dôvodu rýchlosti sťahovania, zmena veľkosti obrázkov sa zlepšuje, takže stále vyzerajú dobre. A pomocou CSS môžete všetky svoje obrázky nastaviť na štandardnú šírku alebo výšku alebo dokonca nastaviť rozmery tak, aby boli relatívne ku kontajneru.
Pamätajte, že pri zmene veľkosti obrázkov by ste mali najlepšie dosiahnuť iba vtedy, ak zmeníte veľkosť iba jednej dimenzie - výšky alebo šírky. Takto zabezpečíte, že si obrázok zachová svoj pomer strán, a nebude to teda vyzerať zvláštne. Druhú hodnotu nastavte na auto alebo nechajte prehliadač informovaný, aby udržiaval konzistentný pomer strán.
CSS3 ponúka riešenie tohto problému s novými vlastnosťami fit-objekt a pozícia objektu. Pomocou týchto vlastností budete môcť definovať presnú výšku a šírku obrázka a spôsob zaobchádzania s pomerom strán. Takto môžete okolo obrázkov vytvoriť efekty letterboxingu alebo orezanie, aby sa obrázok zmestil na požadovanú veľkosť.
Vo väčšine prehliadačov sú dobre podporované ďalšie vlastnosti CSS3, ktoré môžete použiť aj na úpravu svojich obrázkov. Momentálne vo väčšine moderných prehliadačov fungujú veci ako vrhané tiene, zaoblené rohy a transformácie, ktoré umožňujú otáčanie, zošikmovanie alebo posúvanie obrázkov. Potom môžete pomocou prechodov CSS zmeniť obrázky, keď na ne umiestnite kurzor myši, kliknete na ne alebo ich zobrazíte po určitom čase.
Používanie obrázkov ako pozadia
Pomocou CSS je ľahké s vašimi obrázkami vytvoriť efektné pozadie. Môžeš pridať pozadia na celú stránku alebo len na konkrétny prvok. Pomocou stránky je ľahké vytvoriť obrázok na pozadí obrázok na pozadí nehnuteľnosť:
Zmeniť telo selektor na konkrétny prvok na stránke, aby sa pozadie dostalo iba na jeden prvok.
Ďalšou zábavnou vecou, ktorú môžete s obrázkami urobiť, je vytvoriť obrázok na pozadí, ktorý sa nebude posúvať so zvyškom stránky - ako vodoznak. Stačí použiť štýl príloha na pozadí: opravená; spolu s obrázkom na pozadí. Medzi ďalšie možnosti vášho pozadia patrí vytvorenie ich vodorovných alebo zvislých dlaždíc pomocou opakovanie pozadia nehnuteľnosť. Napíš background-repeat: repeat-x; na vodorovný obklad obrázka a background-repeat: repeat-y; obkladať zvisle. A môžete umiestniť svoj obrázok na pozadí pomocou Pozícia na pozadí nehnuteľnosť.
A CSS3 pridáva ďalšie štýly aj pre vaše pozadie. Svoje obrázky môžete roztiahnuť tak, aby sa zmestili na pozadie akejkoľvek veľkosti, alebo môžete obrázok v mierke zväčšiť podľa veľkosti okna. Môžete zmeniť pozíciu a potom orezať obrázok na pozadí. Ale jedna z najlepších vecí na CSS3 je, že teraz môžete vrstviť viac obrázkov na pozadí a vytvárať tak ešte zložitejšie efekty.
HTML5 pomáha obrázkom v štýle
The OBRÁZOK element v HTML5 by mal byť umiestnený okolo všetkých obrázkov, ktoré môžu byť v dokumente samostatné. Jedným zo spôsobov, ako o tom premýšľať, je, ak by sa obraz mohol zobraziť v prílohe, potom by mal byť vo vnútri OBRÁZOK element. Tento prvok potom môžete použiť a OBRÁZOK prvok na pridanie štýlov k vašim obrázkom.