Дайце ваш сайт візуальны цікавасць з фонавай графікі
Выявы з'яўляюцца важнай часткай прывабнага дызайну сайта. Гэта ўключае ў сябе выкарыстанне фонавых малюнкаў. Гэта выявы і графікі, якія выкарыстоўваюцца за абласцямі старонкі , у адрозненне ад малюнкаў, якія прадстаўлены як частка старонак. Гэтыя фонавыя малюнкі могуць дадаць візуальны цікавасць да старонкі і дапамогуць вам дасягнуць візуальнага дызайну, якія вы можаце шукаць на старонцы.
Калі вы пачнеце працаваць з фонавымі малюнкамі, вы, несумненна, будзеце працаваць у сцэнар, дзе вы хочаце выява, каб расцягнуць па памеру.
Гэта асабліва актуальна для адчувальных сайтаў, якія дастаўляюцца ў шырокім дыяпазоне прылад і памераў экрана .
Гэтае жаданне, каб расцягнуць фонавы малюнак з'яўляецца вельмі распаўсюджаным жаданнем для вэб-дызайнераў, таму што не кожнае выява змяшчаецца ў прасторы вэб-сайта. Замест таго каб ўсталёўваць фіксаваны памер, расцягваючы малюнак дазваляе згінаць, каб падагнаць старонку незалежна ад таго , наколькі шырока або вузка вокны браўзэра ёсць.
Лепшы спосаб , каб расцягнуць малюнак па памеры фону старонкі, каб выкарыстоўваць CSS3 ўласцівасць, для фону памеру. Вось прыклад, які выкарыстоўвае фонавы малюнак для цела старонкі і якая ўсталёўвае памер да 100%, так што ён заўсёды будзе расцягвацца, каб адпавядаць экрану.
цела {
фон: URL (bgimage.jpg) не паўтараць;
фон-памер: 100%;
}
Згодна з caniuse.com, гэта ўласцівасць працуе ў IE 9+, Firefox 4 +, Opera 10.5+, Safari 5+, Chrome 10.5+, а таксама на ўсіх асноўных мабільных браўзэраў. Гэта ахоплівае вас для ўсіх сучасных браўзэраў, даступныя сёння, што азначае, што вы павінны выкарыстоўваць гэта ўласцівасць, не асцерагаючыся, што ён не будзе працаваць на нечым экране.
Падробка расцягнутай фону ў старых браўзэрах
Гэта вельмі малаверагодна, што вы павінны падтрымліваць любыя браўзэры старэй IE9, але давайце выкажам здагадку, што вы занепакоеныя тым, што IE8 не падтрымлівае гэта ўласцівасць. У гэтым выпадку, вы можаце падрабіць расцягнутую фон. І вы можаце выкарыстоўваць прэфіксы браўзэраў для Firefox 3.6 (-moz-фон-памер) і Opera 10.0 (-о-фон-памер).
Самы просты спосаб падробленага расцягнутай фонавага малюнка, каб расцягнуць яго на ўсёй старонцы. Тады вы не да канца з дадатковым прасторай або турбавацца, што ваш тэкст змяшчаецца ў расцягнутай зоне. Вось як гэта зрабіць:
ID = "BG" />
- Па-першае, пераканайцеся, што ўсе браўзэры маюць вышыню ў 100%, 0 палёў і 0 водступы на элементах з і BODY HTML. Змесціце наступнае ў галаве вашага HTML-дакуменце:
- Дадайце малюнак , якое вы хочаце быць фонам , як першы элемент вэб - старонкі, і даць яму ідэнтыфікатар «Балгарскай»:
- Усталюйце фонавы малюнак так , каб яно фіксуецца ў верхнім левым і 100% у шырыню і 100% у вышыню. Дадайце гэта ў табліцу стыляў:
IMG # BG {
Становішча: фіксаваны;
верх: 0;
Злева направа: 0;
шырыня: 100%;
вышыня: 100%;
} - Дадаць усе змесціва на старонцы ўнутры DIV элемента з ідэнтыфікатарам «змест». Дадайце DIV пад выявай:
Заўвага: гэта цікава паглядзець на вашай старонцы ў цяперашні час. Малюнак павінна адлюстроўваць выцягнута, але ваша ўтрыманне цалкам адсутнічае. Чаму? Паколькі фонавы малюнак 100% у вышыню, і падзел кантэнту пасля малюнка ў патоку дакумента - большасць браўзэраў не будуць адлюстроўваць яго.Усё ваша ўтрыманне тут - уключаючы загалоўкі, абзацы і г.д.
- Размесціце сваё ўтрыманне так , каб яна адносная і мае Z-індэкс , роўны 1. Гэта прывядзе да яго вышэй фонавага малюнка ў стандартах сумяшчальных браўзэраў. Дадайце гэта ў табліцу стыляў:
#content {
пазіцыя: адносная;
Z-індэкс: 1;
}
- Але вы не зрабілі. Internet Explorer 6 не адпавядае стандартам і да гэтага часу ёсць некаторыя праблемы. Ёсць шмат спосабаў, каб схаваць CSS ад любога браўзэра, але IE6, але самы просты (і найменш верагодна, выклічуць іншыя праблемы), каб выкарыстоўваць ўмоўныя каментары. Змесціце наступнае пасля табліцы стыляў у галаве дакумента:
- Ўнутры падсветленага каментар, дадайце яшчэ адзін ліст стылю з некаторымі стылямі, каб атрымаць IE 6 гуляць добра:
- Абавязкова праверыць у IE 7 і IE 8, а таксама. Вы, магчыма, спатрэбіцца наладзіць каментары для іх падтрымкі, а таксама. Тым не менш, ён працаваў, калі я тэставаў.
OK - гэта праўда WAY празмернасць. Вельмі нешматлікія сайты павінны падтрымліваць IE 7 або 8 больш, значна менш, IE6!
Такім чынам, гэты падыход з'яўляецца састарэлым і непатрэбным, верагодна, для вас. Я пакідаю тут больш як мадэль цікаўнасці, як шмат складаней рэчы, перш чым усе нашы браўзэры гулялі так добра разам!
Падробка расцягнутай фонавага малюнка За меншай плошчу
Вы можаце выкарыстоўваць падобную тэхніку, каб падрабіць расцягнутай фонавы малюнак праз DIV або іншы элемент на вэб-старонцы. Гэта крыху больш складана, паколькі вы павінны альбо выкарыстоўваць абсалютная пазіцыянаванне або дзіўныя пытанні распорных для іншых частак старонкі.
- Змесціце малюнак на старонцы, якую я хачу выкарыстоўваць у якасці фону.
- У табліцы стыляў, усталяваць шырыню і вышыню малюнка. Звярніце ўвагу, што вы можаце выкарыстоўваць працэнты па шырыні або вышыні, але я лічу, што лягчэй рэгуляваць са значэннямі даўжыні для вышыні.
IMG # BG {
шырыня: 20em;
вышыня: 30em;
} - Змесціце змесціва ў DIV з ідэнтыфікатарам «зместам», як мы рабілі вышэй:
Усё ваша ўтрыманне тут
- Стыль у DIV кантэнту, каб быць такой жа шырыні і вышыні ў якасці фонавага малюнка:
Дзіў # ўтрыманне {
шырыня: 20em;
вышыня: 30em;
} - Затым змесціце змесціва перад тых жа вышынь, што і малюнак. Так што, калі ваш вобраз 30em вы б стыль зверху: -30em; Не забудзьцеся паставіць г-індэкс 1 па змесце.
#content {
пазіцыя: адносная;
верх: -30em;
Z-індэкс: 1;
шырыня: 20em;
вышыня: 30em;
} - Затым дадайце ў Z-індэкс -1 для IE 6 карыстальнікаў, як вы рабілі вышэй:
Зноў жа, з фонам памеру карыстаецца шырокай падтрымкай браўзэра зараз робіць гэты падыход таксама вельмі верагодна, непатрэбны і прадстаўлена як прадукт пайшла эпохі. Калі вы сапраўды хацелі выкарыстаць гэты падыход, толькі не забудзьцеся праверыць гэта, як многія браўзэры, як вы можаце.
І калі вашыя змены кантэнту памер, вам неабходна змяніць памер вашага кантэйнера і фонавы малюнак, у адваротным выпадку, вы будзеце ў канчатковым выніку з дзіўныя вынікі.