5 <ИМГ> ЦСС својства која треба да знате

Постоје ЦСС својства, као што су позадинске слике, слике граница, особине маскирања и одсецања, са којима можете директно додајте слике на веб странице и контролишу њихово понашање. Међутим, постоје и мање често помињане ЦСС особине које се односе на слике рад на сликама доданима са ХТМЛ таг, који преферира начин додавања слика на веб странице.

Опис посла ових последњих својстава варира од контролисање сенке слике до подешавање оштрине, помаже нам да боље контролишемо изглед и положај слика доданих са таг. Да их видимо један по један.

1. Изоштрите слике помоћу имаге-рендеринг

Када се слика увећа, претраживач изглађује слику, тако да не изгледа пикселирано. Али, у зависности од резолуције слике и екрана, ово можда неће бити најбоље у сваком тренутку. Овим понашањем прегледача можете управљати помоћу опције имаге-рендеринг својство.

Ово је добро подржана имовина контролише алгоритам који се користи за скалирање слике. Његове двије главне вриједности су оштре ивице и пикелатед.

Тхе оштре ивице вредност одржава контраст боја између пиксела. Другим речима, не врши се заглађивање слика, које одличан за пикселске радове.

Када пикелатед користи се, у близини пиксела пиксела преузме свој изглед, чинећи да изгледа заједно заједно формирајте један велики пиксел, Одлично за екране високе резолуције.

Ако наставите да пажљиво гледате ивице цвећа у ГИФ доле, можете видети разлику између регуларног и а пикелатед слика.

 имг имаге-рендеринг: пикелатед;  

2. Стретцх слике са објект-фит

Тхе садржати, цовер, филл вредности су све познате, ми их користимо за величине позадине која контролише како позадинска слика попуњава елемент којем припада. Тхе објект-фит имовина је прилично слична њој, као што она такође одређује како се величина слике налази унутар контејнера.

Тхе садржати вредност садржи слику унутар њеног контејнера. цовер ради исто, али ако се размера слике и контејнера не подудара, слика је исечена. филл узрокује да слика постане истегните и напуните посуду. пропорционално смањити бира најмању верзију слике приказати.

 
  #цонтаинер видтх: 300пк; хеигхт: 300пк;  имг ширина: 100%; висина: 100%; објект-фит: садржи;  

3. Померите слике помоћу позиција објекта

Слично комплементарном позиција у позадини имовина величине позадине, постоји један позиција објекта проперти фор објект-фит, такође.

Тхе објект-фит својство помера слику унутар контејнера за слике до датих координата. Координате се могу дефинисати као јединице апсолутне дужине, јединице релативне дужине, кључне речи (топ, лево, центар, дно, и јел тако), или а ваљаној комбинацији (топ 20пк ригхт 5пк, центар десно 80пк).

 
  #цонтаинер видтх: 300пк; хеигхт: 300пк;  имг ширина: 100%; висина: 100%; позиција објекта: 150пк 0;  

4. Поставите слике помоћу вертицал-алигн

Понекад додамо (који су по природи инлине) поред текстуалних низова за додатне информације или декорацију. У том случају, поравнавање текста и слике у жељену позицију може бити тад бит лукав - ако не знате коју имовину користити.

Тхе вертицал-алигн имовина је не искључиво за ћелије стола. Он такође може поравнати инлине елемент унутар инлине бок-а и на тај начин се може користити поравнајте слику у линији текста. Потребан је велики број вредности које се могу применити на уметнути елемент, тако да можете да изаберете много опција.

 
 ПДФ  
 

5. Схадов имагес витх филтер: дроп-схадов ()

Када се непримјетно користе у текстовима и кутијама, сјене могу додати живот веб страници. Исто важи и за слике. Слике са основним облицима и транспарентним позадинама могу имати користи од дроп-схадов ЦСС филтер.

Њени аргументи су слично вредностима ЦСС својстава повезаних са сенкама (тект-схадов, бок-схадов). Прва два представљају вертикална и хоризонтална удаљеност између сенки и слике, трећи и четврти су блур анд тхе радијус ширења сјене, а последњи је схадов цолор.

Баш као тект-схадов, дроп-схадов такође ствара сенку која је обликован на припадајући предмет. Дакле, када се примени на слику, сенка добија облик видљивог дела слике.

 имг филтер: дроп-схадов (0 0 5пк блуе);  

Прочитајте и: ЦСС3 Имаге Рефлецтион [ЦСС3 Типс]