Ir CSS īpašības, piemēram, fona attēli, robežu attēli, maskēšanas un izgriešanas īpašības, ar kurām varat tieši pievienot attēlus tīmekļa lapām un kontrolēt to uzvedību. Tomēr ir arī retāk minētas ar attēlu saistītās CSS īpašības darbs ar attēliem, kas pievienoti HTML tag, kuru vēlamais veids, kā pievienot attēlus tīmekļa lapām.
Šo pēdējo īpašību apraksts atšķiras no kontrolēt attēla ēnu uz asuma iestatīšana, palīdzot mums labāk kontrolēt attēlu pievienoto izskatu un atrašanās vietu tag. Apskatīsim tos pa vienam.
1. Pagrieziet attēlus ar attēlu atveidošana
Kad attēls ir palielināts, pārlūks izlīdzina attēlu, tāpēc tas neizskatās pixelated. Bet, atkarībā no attēla un ekrāna izšķirtspējas, tas var nebūt labākais. Jūs varat kontrolēt šo pārlūkprogrammas darbību ar attēlu atveidošana īpašums.
Šis labi atbalstītais īpašums kontrolē algoritmu, ko izmanto attēla mērīšanai. Tās divas galvenās vērtības ir kraukšķīgas malas un pixelated.
The kraukšķīgas malas vērtību saglabā krāsu kontrastu starp pikseļiem. Citiem vārdiem sakot, attēliem nav izlīdzināšanas, kas lieliski piemēroti pikseļu darbiem.
Kad pixelated tiek izmantots pikseļu tuvie pikseļi sākt savu izskatu, padarot to šķiet kopā veido vienu lielu pikseļu, lieliski piemēroti augstas izšķirtspējas ekrāniem.
Ja turpmāk uzmanīgi skatāties uz GIF ziedu malām, var redzēt atšķirību starp regulāru un a pixelated attēlu.
img image-rendering: pixelated;
2. Attēlu izstiepšana ar objekta piemērotība
The satur, piesegt, aizpildiet vērtības ir pazīstamas, mēs tās izmantojam fona izmērs īpašums, kas kontrolē, kā fona attēls aizpilda tā elementu. The objekta piemērotība īpašums ir diezgan līdzīgs tam, kā tas arī nosaka kā attēla izmēri atrodas konteinera iekšpusē.
The satur vērtību satur attēlu tā konteinerā. piesegt tas pats, bet, ja attēla un konteinera attēla attiecība nesakrīt, attēls tiek izgriezts. aizpildiet rada attēlu izstiepiet un piepildiet tās konteineru. mērogsizvēlas mazāko attēla versiju parādīt.
Līdzīgi kā papildinājums fona stāvoklis īpašums fona izmērs, tur ir objekta pozīcija īpašums objekta piemērotība, arī.
The objekta piemērotība īpašums pārvieto attēlu attēla konteinera iekšpusē norādītās koordinātas. Koordinātas var definēt kā absolūtā garuma vienības, relatīvā garuma vienības, atslēgvārdi (tops, pa kreisi, centrs, apakšā, un pa labi) vai a derīga to kombinācija (top 20px pa labi 5px, labajā pusē 80px).
Dažreiz mēs pievienojam (kas ir pēc būtības) blakus teksta virknēm papildu informācijai vai dekorēšanai. Tādā gadījumā, teksta un attēla izlīdzināšana vēlamajā pozīcijā var būt mazliet sarežģīta, ja jūs nezināt, kādu īpašumu izmantot.
The vertikāli izlīdzināt īpašums ir ne tikai ekskluzīvas tabulas šūnām. Tā var arī pielīdzināt inline elementu iekšējās kastes iekšpusē un tādējādi to var izmantot izlīdziniet attēlu teksta rindā. Tas aizņem diezgan daudz vērtību, ko var piemērot inline elementam, tāpēc jums ir daudz iespēju, no kurām izvēlēties.
PDF
5. Ēnu attēli ar filtrs: drop-shadow ()
Lietojot tekstus un kastes nepārprotami, ēnas var pievienot mājas lapai dzīvi. Tas pats attiecas uz attēliem. Attēli ar galvenajām formām un caurspīdīgiem foniem var izmantot piliens ēna CSS filtrs.
Tās argumenti ir līdzīgi ar ēnu saistīto CSS īpašību vērtībām (teksta ēna, kastes ēna). Pirmie divi pārstāv vertikālais un horizontālais attālums starp ēnām un attēlu, trešais un ceturtais ir aizmiglot un izplatīt ēna rādiusu, un pēdējais ir ēnu krāsa.
Tieši kā teksta ēna, piliens ēna arī rada ēnu, kas ir veidojas piederošajam objektam. Tātad, kad tas tiek piemērots attēlam, ēna ņem attēla redzamās daļas formu.
#container platums: 300px; augstums: 300px; img platums: 100%; augstums: 100%; objektu ietilpība: satur;
#container platums: 300px; augstums: 300px; img platums: 100%; augstums: 100%; objektu ietilpība: satur; 
