Изпълнете техниката с CSS
Ако проектирате уеб сайт, може да ви заинтересува да научите как да създадете фиксирано фоново изображение или воден знак на уеб страница. Това е общоприет дизайн, който е бил популярен онлайн от известно време. Това е удобен ефект, за да имате във вашия уеб дизайн чанта на трикове.
Ако не сте го направили преди или сте го опитали преди това без късмет, процесът може да изглежда смущаващ, но всъщност всъщност не е много труден. С този кратък урок ще получите информацията, която ви е необходима, за да овладеете техниката в рамките на няколко минути, като използвате CSS.
Приготвяме се да започнем
Фоновите изображения или водни знаци (които всъщност са само много леки фонови изображения) имат история в печатния дизайн. Документите отдавна включват водни знаци върху тях, за да не се копират. Освен това много флаери и брошури използват големи фонови изображения като част от дизайна на отпечатаното парче. Уеб дизайнът отдавна заимства стилове от печат и фоновите изображения са един от тези заимствани стилове.
Тези големи изображения на фон са лесни за създаване, като използвате следните три свойства на CSS стил :
- фон изображение
- фон-повторение
- фон-закрепване
- фон размер
Предшестващо-Изображение
Ще използвате фоново изображение, за да определите изображението, което ще се използва като ваш воден знак. Този стил просто използва пътя за зареждане на изображение, което имате на сайта си, вероятно в директория, наречена "изображения".
фоново изображение: url (/images/page-background.jpg);
Важно е самият образ да е по-светъл или по-прозрачен от нормалното изображение. Това ще създаде този "воден знак", в който полупрозрачното изображение се крие зад текста, графиките и другите основни елементи на уеб страницата. Без тази стъпка фоновото изображение ще се конкурира с информацията на страницата ви и ще затрудни четенето.
Можете да настроите фоновото изображение във всяка програма за редактиране, като например Adobe Photoshop.
Фон-Повторете
Следващата собственост за повторение на фона. Ако искате изображението ви да бъде графичен с голям воден знак, бихте използвали тази собственост, за да направите това изображение да се показва само веднъж.
background-repeat: no-repeat;
Без собствеността "без повтаряне", по подразбиране е, че изображението ще се повтаря отново и отново на страницата. Това е нежелателно в повечето модерни дизайни на уеб страници, така че този стил трябва да се счита за важен в CSS.
Предшестващо-Приложение
Прикаченият фон е собственост, която много уеб дизайнери забравят. Използването му запазва фоновото ви изображение фиксирано на място, когато използвате "фиксираната" собственост. Това прави това изображение във воден знак, който е фиксиран на страницата.
Стойността по подразбиране за тази собственост е "превъртане". Ако не посочите стойност на прикачения фон, фонът ще се придвижи заедно с останалата част от страницата.
фоново прикачване: фиксирано;
Предшестващо размер
Размерът на фона е по-нова собственост на CSS. Той ви позволява да зададете размера на фон въз основа на прозореца за преглед, в който се разглежда. Това е много полезно за отзивчиви уеб сайтове, които ще се показват на различни размери на различни устройства .
размер на фона: покритие;
Две полезни стойности, които можете да използвате за този имот, включват:
- Покритие - Увеличава размера на фона, така че се показва или пълната или пълната височина. Това означава, че някои части от изображението може да не се появяват на екрана, но цялата област ще бъде покрита.
- Съдържание - Увеличава изображението така, че цялата ширина и височина да се показват в стилния район. Изображението не е отрязано, но недостатъкът е, че части от района може да не бъдат покрити от изображението.
Добавяне на CSS към вашата страница
След като разберете горните свойства и техните стойности, можете да добавите тези стилове към уебсайта си.
Добавете следното към HEAD на вашата уеб страница, ако правите сайт с една страница. Добавете го към стиловете на CSS на външен стилов лист, ако изграждате сайт с няколко страници и искате да се възползвате от силата на външен лист.
<Стил>
тяло {
фоново изображение: url (/images/page-background.jpg);
background-repeat: no-repeat;
фоново прикачване: фиксирано;
размер на фона: покритие;
}
// ->
Променете URL адреса на фоновото си изображение така, че да съответства на конкретното име на файла и пътя на файла, който е подходящ за вашия сайт. Направете каквито и да е други подходящи промени, за да се съобразите с вашия дизайн, както и ще имате воден знак.
Вие може да определите позиция, твърде
Ако искате да поставите водния знак на определено място в уеб страницата си, можете да направите това също. Например, може да искате водният знак в средата на страницата или може би в долния ъгъл, за разлика от горния ъгъл, който е по подразбиране.
За да направите това, добавете свойството за позициониране на фона в стила си. Това ще постави изображението на точното място, което бихте искали да се появи. Можете да използвате стойности на пикселите, проценти или подравнения, за да постигнете този ефект за позициониране.
background-position: център;