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