Daudzi cilvēki izmanto CSS, lai pielāgotu tekstu, mainītu fontu, krāsu, izmēru un daudz ko citu. Bet viena lieta, ko daudzi cilvēki bieži aizmirst, ir tas, ka jūs varat izmantot arī CSS ar attēliem.
Mainīt attēlu pats
CSS ļauj jums pielāgot, kā attēls lapā parādās. Tas var patiešām noderīgi, lai jūsu lapas atbilstu. Nosakot stilu visos attēlos, jūs izveidojat savu attēlu standarta izskatu. Dažas lietas, ko varat darīt:
- Attēlu robežai vai kontūrai pievienojiet
- Noņemiet krāsaino malu ap saistītajiem attēliem
- Attēlu platuma un / vai augstuma pielāgošana
- Pievienojiet pilienu ēnu
- Pagrieziet attēlu
- Mainiet stilu, kad attēls ir virzīts pāri
Piešķirt jūsu attēlam robežu ir lieliska vieta, kur sākt. Bet jums vajadzētu apsvērt vairāk nekā tikai robeža - domājiet par visu attēla malu un pielāgot margins un polsterējumu, kā arī. Attēls ar plānu melnu pāri izskatās jauki, taču, pievienojot dažas polsteres starp robežu un attēlu, var izskatīties vēl labāk.
img { robeža: 1px ciets melns; polsterējums: 5 pikseļi;}
Ja iespējams, vienmēr ir iespējams saistīt ne-dekoratīvos attēlus. Bet, kad jūs to izdarīsiet, atcerieties, ka lielākā daļa pārlūkprogrammu pievieno krāsainu malu ap attēlu. Pat, ja jūs izmantojat iepriekš minēto kodu, lai mainītu robežu, saite ignorēs to, ja vien jūs arī neizdzēsīsit vai nemainīsit saiti. Lai to izdarītu, jums jāizmanto CSS bērnu noteikums, lai noņemtu vai mainītu robežu ap saistītajiem attēliem:
img> a { robeža: nav;}
Varat arī izmantot CSS, lai mainītu vai iestatītu attēlu augstumu un platumu. Kaut arī nav ieteicams izmantot pārlūku, lai pielāgotu attēla izmērus lejupielādes ātruma dēļ, tie daudz uzlabo attēlu izmēru maiņu, lai tie joprojām izskatās labi. Un ar CSS jūs varat iestatīt, lai visi jūsu attēli būtu standarta platums vai augstums vai pat iestatītu izmērus, kas ir salīdzināmi ar konteineru.
Atcerieties, ka, mainot attēlus, labākos rezultātus varat mainīt tikai vienā dimensijā - augstumā vai platumā. Tas ļaus, ka attēls saglabā tā malu attiecību, un tas neizskatās dīvaini. Iestatiet citu vērtību uz auto vai atstājiet to, lai pastāstītu pārlūkprogrammai, ka formāta attiecība ir vienmērīga.
img { platums: 50%; augstums: auto;}
CSS3 piedāvā risinājumu šai problēmai ar jaunajām īpašībām objekts-fit un objekta pozīcija. Izmantojot šīs īpašības, jūs varēsiet precīzi noteikt attēla augstumu un platumu un to, kā jāizmanto malu attiecība. Tas var radīt burbokontu efektus ap jūsu attēliem vai apgriešanu, lai attēls būtu piemērots nepieciešamo lielumu.
Kamēr CSS3 objekts-fit un objekta pozīcija īpašības vēl nav plaši atbalstītas, ir arī citas CSS3 īpašības, kuras lielākajā daļā mūsdienu pārlūkprogrammās ir labi atbalstītas un kuras varat izmantot attēlu modificēšanai. Vairumā modernajās pārlūkprogrammās viss darbojas tieši tagad, piemēram, pilienu ēnas, noapaļoti stūri un transformācijas, lai pagrieztu, pārbīstu vai pārvietotu attēlus. Pēc tam jūs varat izmantot CSS pārejas, lai padarītu attēlus mainīt, kad ir peles kursoru pogas, vai noklikšķinājuši, vai arī pēc kāda laika.
Attēlu izmantošana kā fonu
CSS ļauj viegli izveidot fantāzijas fonus ar jūsu attēliem. Jūs varat pievienot fonus visai lapai vai tikai konkrētam elementam. Lapā ar fona attēlu ir viegli izveidot fona attēlu fona attēls īpašums:
ķermenis { fona attēls: url (background.jpg);}
Nomaini ķermenis atlasiet konkrētu elementu lapā, lai fona tiktu ievietots tikai vienā elementā.
Vēl viena jautra lieta, ko varat darīt ar attēliem, ir izveidot fona attēlu, kas nerunā ar pārējo lapu, piemēram, ūdenszīmi. Jūs vienkārši izmantojat stilu fona piestiprinājums: fiksēts; kopā ar savu fona attēlu. Citas jūsu pieredzes iespējas ietver to flīžu izgatavošanu, izmantojot to tikai horizontāli vai vertikāli fona atkārtojums īpašums. Rakstīt fona atkārtojums: atkārtot-x; lai attēlu flīžu izvietotu horizontāli un fona atkārtojums: atkārtot-y; lai flīžu vertikāli. Un jūs varat novietot fona attēlu ar fona stāvoklis īpašums.
Un CSS3 piebilst arī vairāk stilu jūsu fona, kā arī. Jūs varat izstiepties savus attēlus, lai tie atbilstu jebkura izmēra fona vai iestatītu fona attēlu, lai mērotu ar loga izmēru. Jūs varat mainīt pozīciju un pēc tam nokonfigurēt fona attēlu. Bet viena no vislabākajām lietām par CSS3 ir tā, ka tagad varat ielīmēt vairākus fona attēlus, lai izveidotu vēl sarežģītākus efektus.
HTML5 palīdz stilu attēlus
The ATTĒLS HTML5 elementā jābūt izvietotam ap jebkādiem attēliem, kas dokumentā var būt atsevišķi. Viens veids, kā domāt par to, ir, ja attēls varētu parādīties papildinājumā, tad tam vajadzētu būt iekšpusē ATTĒLS elements Pēc tam varat izmantot šo elementu un FIGCAPTION elementu, lai pievienotu stilus saviem attēliem.
