Выканаць тэхніку з дапамогай CSS
Калі вы распрацоўваеце сайт, вы можаце быць зацікаўлены ў тым, як стварыць фіксаваны фонавы малюнак або вадзяной знак на вэб-старонцы. Гэта звычайнае лячэнне дызайн, які быў папулярны ў Інтэрнэце на працягу досыць доўгага часу. Гэта зручны эфект, каб у вашым вэб-дызайну хітрыкі.
Калі вы яшчэ не зрабілі гэтага раней ці спрабавалі раней без шанцавання, гэты працэс можа здацца страшным, але на самой справе гэта не вельмі цяжка. З дапамогай гэтага кароткага кіраўніцтва вы атрымаеце неабходную вам інфармацыю асвоіць тэхніку ў лічаныя хвіліны з дапамогай CSS.
Пачатак
Фонавыя малюнкі або вадзяныя знакі (якія на самай справе з'яўляюцца вельмі светлымі фонавымі малюнкамі) маюць гісторыю ў друкаваным дызайне. Дакументы ўжо даўно ўключаны вадзяныя знакі на іх, каб прадухіліць іх ад капіявання. Акрамя таго, многія ўлёткі і брашуры выкарыстоўваюць вялікія фонавыя малюнкі, як частка дызайну для друкаванай часткі. Вэб-дызайн ўжо даўно запазычылі стылі з друку і фонавыя малюнкі з'яўляюцца адзін з гэтых запазычаных стыляў.
Гэтыя вялікія фонавыя малюнкі лёгка стварыць з дапамогай наступных трох стыляў CSS уласцівасцяў:
- фонавы малюнак
- фон-паўтарыць
- фон-ўкладанне
- фон-памер
фонавы малюнак
Вы будзеце выкарыстоўваць фонавы малюнак, каб вызначыць малюнак, якое будзе выкарыстоўвацца ў якасці вадзянога знака. Гэты стыль проста выкарыстоўвае шлях да файла для загрузкі малюнка, што ў вас ёсць на вашым сайце, хутчэй за ўсё, у дырэкторыі з імем «адлюстравання".
Фонавы малюнак: URL (/images/page-background.jpg);
Важна, што само малюнак святлей ці больш празрыстае, чым нармальнае малюнак. Гэта створыць што «вадзяны знак» выгляд, у якім напаўпразрыстае малюнак ляжыць ззаду тэксту, графікі і іншых асноўных элементаў вэб-старонкі. Без гэтага кроку, фонавы малюнак будзе канкураваць з інфармацыяй на старонцы і зрабіць яго цяжка чытаць.
Вы можаце наладзіць фонавы малюнак у любой праграме рэдагавання, такія як Adobe Photoshop.
Фон-Repeat
Фон-паўтарыць ўласцівасць будзе далей. Калі вы хочаце, каб ваша выява было вялікай графічны вадзяной знак у стылі, вы б выкарыстоўваць гэта ўласцівасць, каб зрабіць што выява адлюстроўваецца толькі адзін раз.
фон-паўтарыць: не паўтараць;
Без ўласцівасці «не паўтараць», па змаўчанні з'яўляецца тое, што малюнак будзе паўтарацца зноў і зноў на гэтай старонцы. Гэта непажадана, у большасці сучасных канструкцый вэб-старонак, так што гэты стыль варта лічыць важным у вашым CSS.
Фон-Attachment
Фон-ўкладанне з'яўляецца уласцівасцю, што многія вэб-дызайнеры забываюць пра. З яго дапамогай захоўвае фонавы малюнак фіксуецца на месцы, калі вы выкарыстоўваеце «фіксаваны» ўласнасць. Гэта тое, што атрымліваецца, што малюнак у выглядзе вадзянога знака, які замацаваны на гэтай старонцы.
Значэнне па змаўчанні для гэтага ўласцівасці «пракрутка». Калі вы не задасце значэнне фону укладанняў, фон будзе перамяшчацца разам з астатняй часткай старонкі.
фон-ўкладанне: фіксаваны;
Фон-Size
Фон памерам больш новы CSS ўласцівасць. Гэта дазваляе ўсталяваць памер фону на аснове краявіднага экрана яна разглядаецца ст. Гэта вельмі карысна для рэагуюць сайтаў , якія будуць адлюстроўвацца на розных памерах на розных прыладах .
фон-памер: вечка;
Дзве карысных значэнняў, якія вы можаце выкарыстоўваць для гэтага ўласцівасці ўключаюць у сябе:
- Вокладка - шалі фону , так як поўная шырыня або поўная вышыня паказаная. Гэта азначае, што некаторыя часткі выявы могуць не адлюстроўвацца на экране, але, што ўся плошча будзе пакрыта.
- Утрымліваць - Маштабаванне малюнка , бо ўся шырыня і вышыня паказаны ў галіне будучы стыль. Малюнак не адрэзаны, але недахопам з'яўляецца тое, што часткі гэтай галіне, не можа быць пакрыта малюнкам.
Даданне CSS да вашай старонцы
Пасля таго, як вы разумееце, вышэйпаказаныя ўласцівасці і іх значэння, вы можаце дадаць гэтыя стылі на свой вэб-сайт.
Дадайце наступны галавы вашай вэб-старонцы, калі вы робіце сайт з адной старонкі. Дадайце яго ў стылі CSS знешніх стыляў, калі вы будуеце сайт шматстаронкавых і хочаце, каб скарыстацца сілай вонкавым лістом.
<Стыль>
цела {
Фонавы малюнак: URL (/images/page-background.jpg);
фон-паўтарыць: не паўтараць;
фон-ўкладанне: фіксаваны;
фон-памер: вечка;
}
// ->
Змена URL вашага фонавага малюнка , каб адпавядаць канкрэтным імя файла і шлях да файла , які мае дачыненне да вашага сайту. Занясіце іншыя неабходныя змены, каб адпавядаць вашай канструкцыі, а таксама і вы будзеце мець вадзяной знак.
Вы можаце паказаць пазіцыю, Too
Калі вы хочаце змясціць вадзяной знак у пэўным месцы на вашай вэб-старонцы, вы можаце зрабіць гэта, як добра. Напрыклад, вы можаце вадзяной знак у сярэдзіне старонкі або, магчыма, у ніжнім куце, у адрозненне ад верхняга вугла, які па змаўчанні.
Каб зрабіць гэта, дадайце ўласцівасць фону пазіцыі да вашага стылю. Гэта змесціць малюнак у дакладным месцы, якое вы хацелі б, каб яна з'явілася. Можна выкарыстаць значэнне пікселяў, працэнты, або выраўноўвання для дасягнення гэтага эфекту пазіцыянавання.
фон становішча: цэнтр;