Mnogi ljudje uporabljajo CSS za prilagajanje besedila, spreminjanje pisave, barve, velikosti in več. Ampak ena stvar, ki jo mnogi ljudje pogosto pozabljajo, je, da lahko s CSS uporabite tudi slike.
Spreminjanje slike samega sebe
CSS vam omogoča prilagajanje prikaza slike na strani. To je lahko zelo koristno za ohranjanje dosedanjih strani. Z nastavitvijo sloga na vse slike ustvarite standarden videz za svoje slike. Nekatere stvari, ki jih lahko naredite:
- Dodajte rob ali okvir okoli slik
- Odstranite obarvano rob okrog povezanih slik
- Prilagajanje širine in / ali višine slik
- Dodajte senco kapljice
- Zavrtite sliko
- Spremenite sloge, ko je slika premaknjena
Dajanje svoje slike meji je odličen kraj za začetek. Toda razmislite o več kot le meji - pomislite na celoten rob vaše slike in prilagodite robove in oblazinjenje. Podoba s tanko črno obrobo izgleda lepo, vendar dodaja nekaj obloge med mejo in slika lahko izgleda še bolje.
img { border: 1px solid black; padding: 5px;}
Dobra ideja je, da vedno povežete ne-dekorativne slike, kadar je to mogoče. Toda, ko to storite, ne pozabite, da večina brskalnikov dodaja barvno rob okrog slike. Tudi če uporabite zgornjo kodo, če želite spremeniti mejo, bo povezava preglasila to, razen če odstranite ali spremenite mejo na povezavi. Če želite to narediti, morate uporabiti otroško pravilo CSS, da odstranite ali spremenite rob okoli povezanih slik:
img> a { meja: nič;}
Za spreminjanje ali nastavitev višine in širine slik lahko uporabite CSS. Čeprav ni dobra ideja za uporabo brskalnika za prilagajanje velikosti slik zaradi hitrost prenosa, so pri spreminjanju velikosti slike veliko boljši, tako da so še vedno videti dobro. In s CSS lahko slike nastavite na standardno širino ali višino ali celo nastavite razsežnosti glede na vsebnik.
Ne pozabite, da pri spreminjanju velikosti slik za najboljše rezultate spremenite samo eno dimenzijo - višino ali širino. To bo povzročilo, da slika ohranja razmerje stranic in tako ne izgleda čudno. Druga vrednost nastavite na avto ali pustite, da povej brskalniku, da ohrani razmerje stranic.
img { širina: 50%; višina: avto;}
CSS3 ponuja rešitev za to težavo z novimi lastnostmi objektno prileganje in objekt-položaj. S temi lastnostmi boste lahko natančno določili višino in širino slike ter kako bi bilo treba uporabiti razmerje stranic. To lahko ustvari učinke pisemskega okvirja okoli vaših slik ali obrezovanje, da se slika prilagodi zahtevani velikosti.
Medtem ko je CSS3 objektno prileganje in objekt-položaj Lastnosti še niso podprte, obstajajo še druge lastnosti CSS3, ki so v večini sodobnih brskalnikov dobro podprta, da jih lahko spremenite. Stvari, kot so senčne sence, zaobljeni koti in preobliki, ki se vrtijo, poševijo ali premikajo slike, zdaj delujejo v večini sodobnih brskalnikov. Nato lahko uporabite prehodi CSS, da se slike spremenijo, ko se premikate, kliknete ali pa po določenem času.
Uporaba slik kot ozadja
CSS olajša ustvarjanje fancy ozadij s svojimi slikami. Ozadju lahko dodate celotno stran ali samo določen element. Lažje je ustvariti sliko ozadja na strani z slika ozadja lastnina:
telo { ozadje-slika: url (background.jpg);}
Spremenite telo izberite posameznega elementa na strani, da bi ozadje postavili samo na en element.
Druga zabavna stvar, ki jo lahko naredite s slikami, je ustvariti sliko v ozadju, ki se ne pomika z ostalo stranjo - kot vodni žig. Samo uporabite slog background-attachment: fiksno; skupaj z vašo sliko v ozadju. Druge možnosti za vaše ozadje vključujejo izdelavo ploščic samo v vodoravni ali navpični smeri ponovitev ozadja nepremičnine. Napišite ponovitev ozadja: ponovitev-x; sliko postaviti horizontalno in ponovitev ozadja: ponovitev-y; za ploščice navpično. In svojo sliko ozadja lahko postavite na ozadje-položaj nepremičnine.
CSS3 dodaja več stilov za vaše ozadje. Vaše slike lahko raztegnete tako, da ustrezajo vsaki velikosti ozadju ali nastavite ozadje na velikost okna. Položaj lahko spremenite in nato posnamete sliko ozadja. Toda ena od najboljših stvari o CSS3 je, da zdaj lahko prekrivate več slik v ozadju, da ustvarite še bolj zapletene učinke.
HTML5 pomaga slogu slik
The SLIKA Element v HTML5 je treba postaviti okrog poljubnih slik, ki so lahko znotraj dokumenta. Eden od načinov za razmišljanje o tem je, če bi se lahko slika pojavila v prilogi, potem mora biti znotraj SLIKA element. Nato lahko uporabite ta element in FIGCAPTION Element dodaja sloge na svoje slike.
