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