Коришћењем ЦСС-а за постављање позадинске слике

• Може 21, 2024

Да ли се икада запитате како веб локације управљају тако лепим дизајном и сликама које лебде иза текста? Све је то учињено помоћу магије каскадних листова стилова. ЦСС не само да вам омогућава да одредите слику за позадину странице, већ вам омогућава и подешавање начина на који се слика приказује - тако да можете добити само изглед који желите.

Темељни грађевни блок ваше позадинске слике је, подесно, својство 'бацкгроунд-имаге'. Ову некретнину користите да бисте веб локацији рекли где се налази датотека са сликама, као што следи:

тело {
бацкгроунд-имаге: урл ("имаге.гиф");
}

То је све што треба да урадите за постављање позадинске слике за своју веб страницу. Наравно, вероватно ћете желети да прилагодите начин на који се слика појављује. Рецимо да желите да ваша слика започне при врху странице, али да буде центрирана хоризонтално, уместо лево поравнано (подразумевано поравнање). У том случају, желите да додате својство 'бацкгроунд-поситион' вашем ЦСС правилу:

тело {
бацкгроунд-имаге: урл ("имаге.гиф");
позадинска позиција: средњи врх;
}

Када одређујете својство 'позадина-позиција', прва вриједност поставља хоризонтално поравнање (лијево, средиште или десно), а друга поставља вертикално поравнање слике (горњи, средњи или доњи).

Затим одлучите да желите да спречите да се слика хоризонтално поклапа (понавља се), мада желите да се вертикално поплочи. Време је да изнесете својство „позадина-понављање“:

тело {
бацкгроунд-имаге: урл ("имаге.гиф");
позадинска позиција: средњи врх;
позадина-понављање: поновити-и;
}

Ако поставите вредност на „репеат-и“, каже се прегледачу да позадинску слику поплочи дуж оси и, вертикално, али не и оси к (хоризонтално), што је управо оно што смо желели. Ако бисте желели да је плочице водоравно, али не вертикално, уместо тога користите вредност 'репеат-к'; ако уопште нисте желели да се слика поплочи, додајте јој вредност „не-понављај“. Подразумевана вредност је да се слика поставља хоризонтално и вертикално, тако да ако је то најбољи избор за вашу слику, уопште не требате да постављате својство 'бацкгроунд-репеат'.

На крају, можете погледати својство 'прилог позадини'. Ваша слика ће се подразумевано кретати како се страница помера, тако да ако вертикално не понављате слику и ако имате дугу страницу, слика се неће проширити до дна странице. Ово можете променити подешавањем својства 'бацкгроунд-аттацхмент' на 'фик', због чега позадинска слика остаје на истом месту на монитору, без обзира на то како се страница помера. Сада ће ваша правила позадинске слике изгледати овако:

тело {
бацкгроунд-имаге: урл ("имаге.гиф");
позадинска позиција: средњи врх;
позадина-понављање: поновити-и;
позадина-прилог: фиксна;
}


Ако желите да задржите ЦСС правила што је могуће мања, све своје позадинске вредности можете комбиновати у једну линију користећи својство 'бацкгроунд', попут ове:

позадина {
урл ("имаге.гиф") поновите-и фиксни средњи врх;
}

Када користите својство 'бацкгроунд', морате да наведете вредности одређеним редоследом:
[позадинска боја (ако се користи)] [позадина-слика] [позадина-понављање] [позадина-прилог] [позадина-позиција]. Можете изоставити било коју вредност која вам није потребна, само требате да наведете све вредности које користите исправним редоследом или правило неће радити.

Видео Упутства: Week 0 (Може 2024).