Изврши ја техниката со CSS
Ако дизајнирате веб-страница, би можеле да бидете заинтересирани да научите како да креирате фиксна слика или воден печат на веб-страница. Ова е заеднички дизајн третман кој е популарен онлајн подолго време. Тоа е корисен ефект да имате во вашата веб-кеса торба со трикови.
Ако претходно не сте го направиле тоа или не сте го искусиле претходно без среќа, процесот може да изгледа застрашувачки, но тоа всушност не е многу тешко. Со овој краток туторијал, ќе ги добиете информациите што ви се потребни за совладување на техниката во прашање на минути користејќи CSS.
Да започнеме
Сликите во заднина или водени жигови (кои се навистина само светли позадини) имаат историја во печатен дизајн. Документите веќе долго време содржат водени белези за да ги спречат да бидат копирани. Дополнително, многу флаери и брошури користат големи слики во позадина како дел од дизајнот за печатеното дело. Веб дизајн долго време позајмени стилови од печатените и сликите во позадина се еден од овие позајмени стилови.
Овие големи слики во позадина се лесни за создавање со користење на следните три својства на CSS стил :
- позадинска слика
- повторување на позадина
- позадина-приврзаност
- позадина-големина
Позадинска слика
Ќе ја користите сликата за позадина за да ја дефинирате сликата што ќе се користи како ваш воден печат. Овој стил едноставно користи патека на датотека за да вчита слика која ја имате на вашиот сајт, најверојатно во директориумот наречен "слики".
позадина-слика: url (/images/page-background.jpg);
Важно е дека самата слика е посветла или потранспарентна од нормална слика. Ова ќе создаде дека изгледа "воден печат" во кој се наоѓа полу-транспарентна слика зад текстот, графика и други главни елементи на веб-страницата. Без овој чекор, позадината ќе се натпреварува со информациите на вашата страница и ќе ви го отежне читањето.
Можете да ја прилагодите позадинската слика во која било програма за уредување како што е Adobe Photoshop.
Позадина-повторување
Следното својство ќе се повторува. Ако сакате вашата слика да биде голем графички стил во воден печат, вие би користеле овој имот за да направите таа слика да се прикажува само еднаш.
позадина-повторување: нема повторување;
Без својството "не-повторувај", стандардно е дека сликата ќе се повторува одново и одново на страницата. Ова не е пожелно во повеќето современи дизајни на веб-страници, па овој стил треба да се смета за неопходен во вашиот CSS.
Позадина-прилог
Позадина-прилог е имот што многу веб-дизајнери забораваат. Употребата ја задржува вашата позадина да биде фиксирана во место кога го користите "фиксниот" имот. Тоа е она што ја претвора таа слика во воден печат кој е фиксиран на страната.
Стандардната вредност за овој имот е "движете се". Ако не наведете вредност на прилогот за позадина, позадината ќе се лизга заедно со остатокот на страницата.
позадина-прилог: фиксен;
Големина на позадина
Позадината е понова CSS сопственост. Тоа ви овозможува да ја поставите големината на позадина врз основа на приказот за кој се гледа. Ова е многу корисно за одговорите на веб-страниците што ќе се прикажуваат во различни големини на различни уреди .
позадина-големина: покритие;
Две корисни вредности кои можете да ги користите за овој имот се:
- Корица - ја разложува позадината, така што е прикажана целата ширина или целосна висина. Ова значи дека некои делови од сликата можеби не се појавуваат на екранот, туку дека целата област ќе биде покриена.
- Содржи - ја скелира сликата, така што целосната ширина и висина се прикажани во површината што е стилизирана. Сликата не е отсечена, но недостатокот е тоа што делови од површината можеби не се покриени со сликата.
Додавање на CSS на вашата страница
Откако ќе ги разберете горенаведените својства и нивните вредности, можете да додадете овие стилови на вашата веб-страница.
Додајте го следново во глава на вашата веб-страница ако правите сайт со една страница. Додајте го во CSS стилови на надворешен стилски лист ако градите повеќе страници и сакате да ја искористите моќта на надворешен лист.
<стил>
тело {
позадина-слика: url (/images/page-background.jpg);
позадина-повторување: нема повторување;
позадина-прилог: фиксен;
позадина-големина: покритие;
}
// ->
Променете го URL-то на вашата позадина за да одговарате на специфичното име на датотека и патеката на датотеката што е релевантно за вашиот сајт. Направете какви било други соодветни промени за да одговараат на вашиот дизајн, како и ќе имате воден печат.
Можете да ја наведете позицијата, Премногу
Ако сакате да го поставите водениот жиг на одредена локација на вашата веб-страница, можете да го направите тоа исто така. На пример, можеби ќе сакате воден печат во средината на страницата или можеби во долниот агол, за разлика од горниот агол, што е стандардно.
За да го направите ова, додадете својство на позадинската позиција во вашиот стил. Ова ќе ја стави сликата на точното место што би сакале да се појави. Можете да ги користите вредностите на пиксел, процентите или усогласувањата за да го постигнете позиционирачкиот ефект.
позадина-позиција: центар;