Ба вебсайти шумо визуалӣ визаро бо графикҳои аслӣ диҳед
Тасвирҳо қисми муҳими тарҳҳои ҷолиби ҷолиб мебошанд. Ин аз истифодаи тасвирҳои замина иборат аст. Инҳо тасвирҳо ва графикҳо ҳастанд, ки дар майдони саҳифа истифода мешаванд, ки бо тасвирҳое, ки ҳамчун қисми саҳифаҳои мундариҷа пешниҳод шудаанд, истифода мешаванд. Ин тасвирҳои аслӣ метавонанд ба саҳифа таваҷҷӯҳи возеҳ диҳанд ва ба шумо кӯмак мерасонанд, ки тарроҳии визеаро, ки шумо метавонед дар саҳифа ҷустуҷӯ кунед.
Агар шумо бо тасвирҳои аслӣ кор карданӣ шавед, бешубҳа, ба сенариат хоҳед расид, ки шумо мехоҳед тасвирро барои мувофиқат кардани саҳифа тамошо кунед.
Ин хусусан барои вебсафҳаҳои ҷавобгӯ мебошад, ки ба доираи васеи дастгоҳҳо ва андозаи экран расонида мешавад .
Ин хоҳиши он аст, ки тасвири заминаро ҷобаҷо кунед, хоҳиши умумӣ барои дизайнерҳои вебсайт, зеро на ҳама симо дар фазои вебсайт мувофиқ аст. Ба ҷои иваз кардани андозаи устувор, дароз кардани тасвир имкон медиҳад, ки веб браузерро васеъ ё танг накунад, ки ба он мувофиқат кунад.
Тарзи беҳтарини тасвири тасвир барои замина кардани саҳифа ба он аст, ки моликияти CSS3 -ро барои андозаи аслӣ истифода барад. Ин мисолест, ки тасвири заминаро барои ҷисми саҳифа истифода мебарад, ки андозаи онро ба 100% баробар мекунад, то он даме, ки ҳамеша ба экран мувофиқат кунад.
{
background: url (bgimage.jpg) такрори;
андозаи аслӣ: 100%;
}}
Мутобиқи caniuse.com, ин амвол дар IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ ва дар ҳама браузерҳои мобилӣ кор мекунад. Ин ба шумо барои тамоми браузерҳои муосир дастрас аст, ки маънои онро дорад, ки шумо бояд ин молро бе тарс истифода баред, ки он дар экрани шахс кор намекунад.
Фоне ки заминаи заифро дар браузерҳои пешрафта
Ин хеле кам аст, ки ба шумо лозим аст, ки ҳама браузерҳоро аз IE9 пуштибонӣ кунед, аммо биёед тасаввур кунед, ки шумо IE8 ин амволро дастгирӣ намекунад. Дар ин ҳолат шумо метавонед асбоби васеъро истифода баред. Ва шумо метавонед пешакҳои браузери барои Firefox 3.6 (-moz-background-size) ва Opera 10.0 (-o-background-size) истифода баред.
Тарзи осонтаре, ки тасвирҳои асбобу асбобу асбобу асбобҳои тасвириро фаро мегиранд, он дар тамоми саҳифа паҳн карда мешавад. Пас шумо бо фазои иловагӣ ба охир наравед ё ба ташвиш афтед, ки матнаи шумо дар минтақаи васеъ ҷойгир бошад. Ин ҷо чӣ тавр бояд кард:
id = "bg" />
- Пеш аз ҳама, боварӣ ҳосил кунед, ки ҳамаи браузерҳо 100% баландии, 0 маргарин ва 0 пагоҳӣ дар элементҳои HTML BODY доранд. Дар поён ҳуҷҷати зеринро дар сарлавҳаи HTML кунед:
- Иловаи тасвирро, ки шумо мехоҳед backgroundро ҳамчун унсури якуми саҳифа илова кунед ва он номи "bg" -ро илова кунед:
- Тасвири заминаро ҷойгир кунед, то он дар боло ва чап ҷойгир карда шавад ва 100% васеъ ва 100% дар баландии он аст. Ин ба лавҳаи сабки худ илова кунед:
img # bg {
мавқеи: fixed;
top: 0;
left: 0;
width: 100%;
баландӣ: 100%;
}} - Ҳамаи мундариҷаи худро ба саҳифаи дохилии DIV бо рамзи "мӯҳтаво" илова кунед. Илова кардани DIV дар тасвир:
Эзоҳ: ин ҷустуҷӯи ҳозир дар саҳифаи шумо назаррас аст. Тасвир бояд намоиш дода шавад, аммо мундариҷаи шумо пурра нестанд. Чаро? Азбаски симои аслӣ 100% дар баландии аст, ва воҳиди мундариҷа баъд аз тасвири ҳуҷҷат аст - бисёр браузерҳо намоиш дода намешаванд.Ҳамаи мундариҷаи шумо дар инҷо - аз ҷумла сарлавҳаҳо, параграфҳо ва ғ.
- Мӯҳтавои худро ҷойгир кунед, то ки он нисфи нисбиро дорад ва z-index-ро дорад . Ин онро дар болои тасвири замина дар браузерҳои стандартӣ мувофиқат мекунад. Ин ба лавҳаи сабки худ илова кунед:
#content {
мавқеи: нисбӣ;
z-index: 1;
}}
- Аммо шумо ба анҷом нарасидаед. Internet Explorer 6 стандартҳои мувофиқро иҷро намекунад ва ҳанӯз ҳам мушкилот дорад. Роҳҳои зиёде мавҷуданд, ки CSS аз ҳар як браузер пинҳон мекунанд, аммо IE6, вале осонтарин (ва эҳтимолан эҳтимолияти мушкилоти дигар) ба шарҳи шаръӣ истифода шавад. Баъд аз почтаи шумо дар сарлавҳаи ҳуҷҷати зерин равед:
- Дар дохили шарҳи муфассал, як варақи сабки дигарро бо баъзе услубҳо барои дарёфти IE 6 нав кунед:
- Боварӣ ҳосил кунед, ки дар IE 7 ва IE 8 санҷида шаванд. Ба шумо лозим аст, ки шарҳҳоро барои дастгирӣ кардани онҳо таҳрик кунед. Бо вуҷуди ин, он вақте ки ман онро озмудам.
Хуб, ин аст, ки таслими WOW аст. Бисёр сайтҳо бояд дастгирии IE 7 ё 8 дигар, IE6 хеле камтар бошанд!
Ҳамин тариқ, ин муносибат пешакӣ ва эҳтимолан барои шумо зарур нест. Ман онро дар ин ҷо бештар ҳамчун модели шавқовар медонам, ки чӣ қадар чизҳои душворӣ пеш аз ҳама браузерҳои мо якҷоя бозӣ мекарданд!
Фазоеро, ки дар майдони хурдтар ҷойгир аст, тасвир мекунад
Шумо метавонистед, ки як тасвири ҳаминро истифода кунед, то тасвири асбоби рангро дар як DIV ё элементи дигар дар саҳифаи вебӣ истифода баред. Ин хеле душвор аст, зеро ба шумо лозим меояд, ки мавқеи мутлақро истифода барад ё масъалаҳои ҷудошавии аҷибро барои дигар қисмҳои саҳифаи худ дошта бошед.
- Тасвирро дар саҳифа ҷойгир кунед, ки ман мехоҳам ҳамчун замина истифода барам.
- Дар варақи сабки, тасвири ва баландии тасвирро муайян кунед. Дар хотир доред, ки шумо метавонед барои садои васеъ ё баландтарин истифода баред, аммо ман осонтар аст, ки бо арзишҳои дарозмуддат барои баландӣ мувофиқат кунам.
img # bg {
width: 20em;
баландӣ: 30м;
}} - Мундариҷаи худро ба як чизи дигар илова кунед:
Ҳамаи мундариҷаи шумо дар ин ҷо
- Эҳтиром ба div мазмуни он васеъ ва баландтарин ҳамчун тасвири замина:
div # content {
width: 20em;
баландӣ: 30м;
}} - Сипас мундариҷа ба андозаи ҳамон тасвир ҳамчун баландтарин ҷойгир кунед. Пас, агар тасвири шумо 30ем бошад, шумо як тарзи болоӣ доред: -30ем; Фаромӯш накунед, ки зеркашии 1-ро дар бораи мундариҷа гузоред.
#content {
мавқеи: нисбӣ;
top: -30ем;
z-index: 1;
width: 20em;
баландӣ: 30м;
}} - Сипас дар Z-index-1 барои корбарони IE 6 илова кунед, чунон ки шумо болотар будед:
Боз ҳам, бо андозаи фарсудае, ки бо дастгирии браузери васеъе, ки ҳоло онро мекунад, ин усул низ хеле эҳтиёткор буда, ҳамчун маҳсулоте, ки дер давом мекунад, пешниҳод мешавад. Агар шумо намехостед, ки ин усулро истифода баред, танҳо боварӣ ҳосил кунед, ки дар ин чанд браузерҳо шумо метавонед онро санҷед.
Ва агар мундариҷаи шумо андозаи тағирро дошта бошад, шумо бояд андозаи қуттиҳои контейнер ва аломати онро тағир диҳед, дар акси ҳол, шумо бо натиҷаҳои аҷоиб тамос мекунед.