Yra CSS savybės, pvz., Fono paveikslėliai, sienos vaizdai, maskavimo ir iškirpimo savybės, su kuriomis galite tiesiogiai pridėti vaizdus tinklalapiuose ir valdyti jų elgesį. Tačiau yra ir rečiau paminėtų su vaizdu susijusių CSS savybių darbas su nuotraukomis, pridėtas su HTML žyma, kuris pageidaujamas būdas pridėti vaizdus į tinklalapius.
Pastarųjų savybių aprašymas skiriasi valdyti vaizdo šešėlį į ryškumo nustatymas, padėti mums geriau kontroliuoti vaizdų išvaizdą ir padėtį, pridėtą su žyma. Pažiūrėkime juos po vieną.
1. Padidinkite vaizdus vaizdo atvaizdavimas
Kai vaizdas yra padidintas, naršyklė išlygina vaizdą, todėl jis neatrodo pixelated. Tačiau, atsižvelgiant į vaizdo ir ekrano skiriamąją gebą, tai gali būti ne visada geriausia. Jūs galite valdyti šią naršyklės elgseną su vaizdo atvaizdavimas nuosavybė.
Šis gerai palaikomas turtas valdo algoritmą, naudojamą vaizdo mastui. Jos dvi pagrindinės vertybės trapūs kraštai ir pixelated.
The trapūs kraštai vertė palaiko spalvų kontrastą tarp taškų. Kitaip tariant, vaizdams nesudaro jokio lyginimo puikiai tinka pikselių kūriniams.
Kada pixelated naudojamas netoliese esantis pikselio taškas pasirodyti, kad jie atrodytų kartu sudaro vieną didelį vaizdo elementą, puikiai tinka didelės skiriamosios gebos ekranams.
Jei toliau atidžiai stebite GIF žemiau esančius gėlių kraštus, galite matyti skirtumą tarp reguliaraus ir a pixelated vaizdą.
img image-rendering: pixelated;
2. Ištiesinkite vaizdus objektas
The yra, padengti, užpildyti visos žinomos, mes jas naudojame fono dydis ypatybė, kuri kontroliuoja, kaip fono paveikslėlis užpildo elementą, kuriam jis priklauso. The objektas nuosavybė yra gana panaši į ją, nes ji taip pat nustato kaip vaizdo dydis yra talpykloje.
The yra vertė jame yra vaizdas per savo konteinerį. padengti daro tą patį, bet jei vaizdo ir konteinerio kraštinių santykis nesutampa, vaizdas yra nukirptas. užpildyti sukelia vaizdą ištempkite ir užpildykite jo talpyklą. sumažintipasirenka mažiausią vaizdo versiją Rodyti.
Panašiai kaip ir papildymas fono padėtis nuosavybė fono dydis, ten yra objekto padėtis nuosavybė objektas, taip pat.
The objektas nuosavybė perkelia vaizdą viduje vaizdo talpyklos koordinačių. Koordinatės gali būti apibrėžtos kaip absoliučio ilgio vienetai, santykinio ilgio vienetai, raktiniai žodžiai (viršuje, kairėje, centras, apačioje, ir teisė) arba a galiojantis jų derinys (viršų 20px dešinėje 5px, dešinėje pusėje 80px).
Kartais pridedame šalia teksto eilutės papildomos informacijos ar dekoravimo. Tuo atveju, teksto ir vaizdo derinimas į norimą poziciją gali būti šiek tiek sudėtinga, jei nežinote, kokį turtą naudoti.
The vertikaliai lygiuoti turtas yra ne vien tik stalo ląstelėms. Jis taip pat gali sulygiuoti inline elementą vidinėje dėžutėje, todėl gali būti naudojamas sulygiuoti vaizdą teksto eilutėje. Tai užima nemažai vertybių, kurios gali būti taikomos inline elementui, todėl turite daug pasirinkimų.
PDF
5. Su „Shadow“ vaizdais filtras: drop-shadow ()
Kai tekstai ir dėžutės naudojami nepastebimai, šešėliai gali pridėti gyvenimą tinklalapiui. Tas pats pasakytina ir vaizduose. Vaizdai su pagrindinėmis figūromis ir skaidriu fonu gali pasinaudoti mesti šešėlį CSS filtras.
Jo argumentai yra panašūs į šešėlinių CSS savybių vertes (teksto šešėlis, langelis-šešėlis). Pirmieji du atstovauja vertikalus ir horizontalus atstumas tarp šešėlių ir vaizdo, trečiasis ir ketvirtasis yra neryškus ir skleisti šešėlio spindulį, ir paskutinis yra šešėlių spalva.
Tiesiog kaip teksto šešėlis, mesti šešėlį taip pat sukuria šešėlį suformuoti į priklausomą objektą. Taigi, kai jis taikomas vaizdui, šešėlis paverčia matomos vaizdo dalies formą.
#container plotis: 300px; aukštis: 300px; img plotis: 100%; aukštis: 100%; objekto tinkamumas: yra;
#container plotis: 300px; aukštis: 300px; img plotis: 100%; aukštis: 100%; objekto tinkamumas: yra; 
