Ако сте дизајнирање веб странице, можда ће вас занимати како да направите фиксну позадинску слику или водени жиг на веб страници. Ово је уобичајени третман дизајна који је популаран на мрежи већ дуже време. Згодан је ефекат да имате трикове трикова за веб дизајн.
Ако то раније нисте радили или сте раније покушали без среће, поступак може деловати застрашујуће, али заправо уопште није много тежак. Овим кратким упутством добићете информације потребне за учење технике за неколико минута користећи ЦСС.
Почетак
Позадинске слике или водени жигови (који су заправо само врло лагане позадинске слике) имају историју у штампаном дизајну. Документи већ дуго садрже водене жигове како би спречили њихово копирање. Поред тога, многи флајери и брошуре користе велике позадинске слике као део дизајна штампаног дела. Веб дизајн већ дуго позајмљује стилове из штампе, а позадинске слике су један од ових позајмљених стилова.
Ове велике позадинске слике лако је створити помоћу следеће три ЦСС стил својства:
- позадинска слика
- позадина-понављање
- позадина-прилог
- величина позадине
Позадинска слика
Помоћу позадинске слике дефинисаћете слику која ће се користити као водени жиг. Овај стил једноставно користи путању до датотеке за учитавање слике коју имате на својој веб локацији, вероватно у директоријуму са именом слике.
позадина-слика: урл (/имагес/паге-бацкгроунд.јпг);
Важно је да је сама слика светлија или прозирнија од уобичајене слике. Ово ће створити да "водени жиг"изглед у којем полупрозирна слика лежи иза текста, графике и других главних елемената веб странице. Без овог корака, позадинска слика ће се такмичити са информацијама на вашој страници и отежаће читање.
Можете подесити позадинску слику у било ком програму за уређивање, на пример Адобе Пхотосхоп.
Понављање позадине
Следи својство бацкгроунд-репеат. Ако желите да ваша слика буде велика графика у стилу воденог жига, користили бисте ово својство да бисте је приказали само једном.
позадина-понављање: без понављања;
Без без понављања својство, подразумевано је да се слика понавља и понавља на страници. Ово је непожељно у већини модерних дизајна веб страница, па би овај стил требало сматрати неопходним у вашем ЦСС-у.
Позадина-Прилог
Позадина-прилог је својство на које многи веб дизајнери заборављају. Ако га користите, ваша позадинска слика остаје фиксна на месту када користите фиксне имовина. То је оно што ту слику претвара у водени жиг који је фиксиран на страници.
Подразумевана вредност за ово својство је свитак. Ако не наведете вредност прилога у позадини, позадина ће се померати заједно са остатком странице.
позадина-прилог: фиксно;
Величина позадине
Величина позадине је новије ЦСС својство. Омогућава вам да подесите величину позадине на основу приказа у којем се гледа. Ово је врло корисно за одзивне веб странице који ће се приказивати у различитим величинама на различитим уређајима.
величина позадине: поклопац;
Две корисне вредности које можете користити за ово својство укључују:
- Цовер - Скалира позадину тако да је приказана пуна ширина или пуна висина. То значи да се неки делови слике можда неће појавити на екрану, али да ће цело подручје бити покривено.
- Садржати - Скалира слику тако да се на подручју које се стилизује приказују и читава ширина и висина. Слика није одсечена, али лоша страна је та што делови подручја можда нису покривени сликом.
Додавање ЦСС-а на вашу страницу
Након што разумете горња својства и њихове вредности, можете да додате ове стилове на своју веб локацију.
Додајте следеће у ХЕАД ваше веб странице ако правите веб страницу са једном страницом. Додајте га у ЦСС стилове спољног листа стилова ако правите веб локацију са више страница и желите да искористите снагу спољног листа.
Промените УРЛ слике у позадини како би одговарао одређеном имену датотеке и путањи датотеке која је релевантна за вашу веб локацију. Направите све друге одговарајуће промене како бисте одговарали и вашем дизајну и добићете водени жиг.
Можете одредити и положај
Ако желите да поставите водени жиг на одређено место на својој веб страници, можете и то да урадите. На пример, можда ћете желети водени жиг у средини странице или можда у доњем углу, за разлику од горњег угла, који је подразумевани.
Да бисте то урадили, додајте својство бацкгроунд-поситион својству. Ово ће поставити слику на тачно место на којем бисте желели да се појави. Можете да користите вредности пиксела, проценте или поравнања да бисте постигли тај ефекат позиционирања.
положај позадине: центар;