Еве како да додадеме реалистични слики со користење на CSS
Погледни популарни веб-сајтови денес и еден дизајн третман кој сте сигурни дека за да ја видите е голем, екран опфаќа позадина слики. Еден од предизвиците со додавање на овие слики доаѓа од најдобрата пракса што веб-сајтовите мора да одговорат на различни големини и уреди на екранот - пристап кој е познат како реагирачки веб-дизајн .
Бидејќи изгледот на вашиот веб-сајт се менува и растовара со различни големини на екранот, исто така мора да ги направат овие слики во заднина соодветно.
Всушност, овие "слики со течности" се еден од клучните делови на одговорите на веб-страниците (заедно со течност мрежа и медиумски пребарувања). Овие три парчиња беа главен одговорен веб-дизајн од самиот почеток, но и покрај тоа што отсекогаш беше прилично лесно да се додадат реалистични слики на страница (графички слики се графички кодирани како дел од HTML-маркап) исто со позадина слики (кои се стилизирани во страната со користење CSS својства позадина) долго време се предвидени значителен предизвик за многу веб-дизајнери и пред крајот на програмерите. За среќа, додавањето на "позадина-големина" на имотот во CSS го направи ова возможно.
Во посебна статија, јас покрив како да ја користам големината на сликата на сликата за CSS3 за да ги растегнувам сликите за да се вклопуваат во прозорец, но има уште подобар, покорисен начин да се распореди за овој имот. За да го направите ова, ќе ја користиме следната комбинација на својства и вредности:
позадина-големина: покритие;
Имотот на клучен збор за покритие му кажува на прелистувачот да ја скалира сликата за да одговара на прозорецот, без оглед колку е голем или мал тој прозорец добива. Сликата е намалена за да се покријат целиот екран, но оригиналните пропорции и соодносот на сликата се чуваат непроменети, спречувајќи ја сликата да биде изобличена.
Сликата се поставува во прозорецот што е можно поголемо за да се покрие целата површина на прозорецот. Ова значи дека нема да имате празни места на вашата страница или било каква дисторзија на сликата, но тоа исто така значи дека некои од сликите може да се отсечат во зависност од односот на екранот и сликата во прашање. На пример, рабовите на сликата (горниот, долниот, левиот или десниот) може да се отсечат на сликите, во зависност од тоа кои вредности ги користите за својството на позадинската позиција. Ако ја ориентирате позадината на "горе лево", секое вишок на сликата ќе се симне од долната и десната страна. Ако ја центрирате позадинската слика, вишокот ќе се симне од сите страни, но бидејќи тој вишок се шири, влијанието на која било страна ќе биде помало.
Како да се користи позадина-големина: капак;
Кога ја креирате сликата во позадина, добра идеја е да креирате слика што е прилично голема. Додека прелистувачите можат да направат помала слика без забележително влијание врз визуелниот квалитет, кога прелистувачот ја разложува сликата до големината поголема од оригиналните димензии, визуелниот квалитет ќе се деградира, станува заматен и пиксел. Недостатоци на ова е тоа што вашата страница треба да ја достигне хит на изведба кога доставувате гигантски слики на сите екрани.
Кога ќе го направите ова, осигурете се дека правилно ги подготвувате тие слики за брзината на преземање и испораката на интернет . На крајот, треба да го најдете среќниот медиум помеѓу доволно големината на сликата и квалитетот и разумната големина на датотеката за брзини на преземање.
Еден од вообичаените начини за користење на сликите во позадина е кога сакате таа слика да ја искористи целосната позадина на страната, без разлика дали таа страница е широка и се гледа на десктоп компјутер или многу помала и се испраќа на рачно, мобилно уреди.
Поставете ја вашата слика на вашиот веб-домаќин и ја додадете во вашиот CSS како позадина:
позадина-слика: url (fireworks-over-wdw.jpg);
позадина-повторување: нема повторување;
позадина-позиција: центар центар;
позадина-прилог: фиксен;
Прво додајте префикс на префиксот CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Потоа додадете својство CSS:
позадина-големина: покритие;
Користење на различни слики кои одговараат на различните уреди
Додека одговорен дизајн за десктоп или лаптоп искуство е важен, различните уреди кои можат да пристапат на Интернет значително се зголемија, а со тоа доаѓа и поголем избор на големини на екранот.
Како што беше претходно споменато, вчитувањето на многу голема одзивна позадинска слика на паметен телефон, на пример, не е ефикасен дизајн или дизајниран за пропусен опсег.
Научете како можете да ги користите медиумските пребарувања за да прикажувате слики што ќе бидат соодветни за уредите на кои ќе бидат прикажани и понатаму ќе ја подобрува компатибилноста на вашиот веб-сајт со мобилните уреди.
Авторски напис на Џенфиер Крајнин. Ревидирани од Џереми Жирар 9/12/17