E hāʻawi i kāu pūnaewele punahele kiʻi me nā kiʻi'enehi
He kiʻi koʻikoʻi nā kiʻi i nā pūnaewele pūnaewele maikaʻi. Loaʻa kēia i ka hoʻohanaʻana i nā kiʻi kiʻi. ʻO kēia nā kiʻi a me nā kiʻi i hoʻohanaʻia ma hope o nāʻaoʻao o kahiʻaoʻao ma kahi kū'ē i nā kiʻi i hōʻikeʻia ma keʻano heʻaoʻao o nāʻaoʻao punaewele. Hiki i kēia mau kiʻi hoʻohālikelike ke hoʻoulu i ka makemake kiʻi i kekahiʻaoʻao a kōkua iāʻoe e hoʻokō i ka hoʻolālā kiʻi e nānā aiʻoe ma kaʻaoʻao.
Inā hoʻomakaʻoe e hana me nā kiʻi kiʻi, e holo ponoʻoleʻoe i kahi hiʻona e makemakeʻoe i kiʻi e hoʻolālā e pili i kaʻaoʻao.
He mea kūpono kēia no nā pūnaewele pane e hoʻounaʻia ana i nāʻenehana a me nā nui o ka nui .
ʻO kēia makemake e hoʻolālā i kahi kiʻi pilina he makemake mau loa ia no nā mea hoʻolale pūnaewele no ka mea,ʻaʻole pono nā kiʻi a pau ma kahi o ka pūnaewele. Ma kahi o kahi nui i hoʻopaʻaʻia, e hoʻouka i ke kiʻi e hiki ai ke hoʻololi i kaʻaoʻao no ka nui o ke kikowaena o ka pūnaewele .
ʻO ke ala maikaʻi loa e hoʻolālā i kahi kiʻi e hoʻohui i kaʻaoʻao o kahiʻaoʻao e hoʻohana i ka waiwai CSS3 , no ka nui o ka nui. Eia keʻano hoʻohālike e hoʻohana ana i kahi kiʻi kiʻi no ke kino o kahiʻaoʻao a hoʻonohonoho i ka nui i 100% no ka hoʻonui mauʻana i ka nānāʻana.
ke kino
kuhi: url (bgimage.jpg)ʻole hou;
ʻike nui-nui: 100%;
}
Wahi a caniuse.com, hana kēia waiwai i IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, a ma luna o nā pūnaewele pūnaewele nui. Mālama kēia iāʻoe no nā'ōnaewele hou hou i kēia mau lā,ʻo ia hoʻi, ponoʻoe e hoʻohana i kēia waiwai me ka makaʻuʻole i ka hanaʻana o kahi kanaka.
Hoʻopili i kahiʻikepili paʻa i nā Pūnaewele Kiʻekiʻe
Makemakeʻole pahaʻoe e kākoʻo i nā pūnaewele iʻoi aku ka nui ma mua o IE9, akā e noʻonoʻoʻoe ua pilikiaʻoeʻaʻole i kākoʻo ka IE8 i kēia waiwai. I kēlā hana, hiki iāʻoe ke hōʻolo i kahi hiʻokoʻa hāla. A hiki iāʻoe ke hoʻohana i nā prefix polokalamu kele pūnaewele no Firefox 3.6 (-moz-background-size) a me Opera 10.0 (-o-kumu-nui).
ʻO ke ala maʻalahi e hōʻolo i kahi kiʻi hohola e hoʻopili ai ma'ō o kaʻaoʻao holoʻokoʻa. A laila,ʻaʻoleʻoe e pau me kahi wahi'ē aʻe aiʻole e hopohopo paha e pili ana kāu kikokikona i ka'āpana. Eia ka pehea e hana ai:
id = "bg" />
- ʻO ka mea mua, e hōʻoia i ka loaʻaʻana o 100% ka nui o nā keleʻele, 0 mau palena, a me 0 mau pale ma luna o nā'enewai HTML a me HTML. E kau i kēia ma ke poʻo o kāu palapala HTML:
- Hoʻohui i ke kiʻi āu e makemake ai e lilo i kumuhana ma hope o ka helu mua o ka pūnaewele pūnaewele, a hāʻawi i ka id o "bg":
- E hoʻonoho i ke kiʻi kiʻi i hoʻonohonohoʻia i ka luna a me ka hema a 100% wide a 100% ke kiʻekiʻe. E hoʻohui i kēia i kāu pepaʻano:
img # bg {
wahi: hoʻopaʻa;
luna: 0;
waiho hema: 0;
whānui: 100%;
ke kiʻekiʻe: 100%;
} - E hoʻohui i kāu mea a pau i kaʻaoʻao ma loko o kahi'āpana DIV me kahi id o ka "content". Hoʻohui i ka DIV ma lalo o ke kiʻi:
Nānā: makemake mākou e nānā i kāuʻaoʻao i kēia manawa. Pono e hōʻike i ke kiʻi, akā, ua pau loa kāuʻike. No ke aha mai? No ka mea, he 100% ka lōʻihi o ke kiʻi, aʻo ka mahele puʻupuʻu ma hope o ke kiʻi i ka holoʻana o ka palapala -ʻo ka nui o nā pūnaeweleʻaʻole lākou e hōʻike.Loaʻa kāu mau mea a pau maʻaneʻi - me nā poʻomanaʻo, nā palaka, a pēlā aku.
- Hoʻonohonoho i kāu mea i helu ai no ka mea he pili ia a he z-index of 1. Na kēia e lawe mai ma luna o ke kiʻi kumu ma nā pūnaewele hōʻoia. E hoʻohui i kēia i kāu pepaʻano:
#content {
wahi: pili;
z-index: 1;
}
- Akāʻaʻoleʻoe i hana. ʻAʻoleʻike ka Internet Explorer 6 i ke kūlana kūpono a he mau pilikia kekahi. He nui nāʻano e hūnā i ka CSS mai kēlā me kēia pūnaewele akā i ka IE6, akā,ʻo ka maʻalahi (a me ka hopena o ka hopenaʻana i nā pilikia'ē aʻe),ʻo ia ke hoʻohana i nā'ōlelo kūlana. E kau i kēia ma hope o kāu style style ma ke poʻo o kāu palapala:
- Ma loko o ka manaʻo i hoʻokumuʻia, e hoʻokomo i kahi pepaʻano'ē aʻe me kekahi mauʻano e loaʻa iā IE 6 e pāʻani maikaʻi:
- E hōʻoiaʻiʻo i ka hoʻokolohua i IE 7 a me IE 8. Ponoʻoe e hoʻololi i nā'ōlelo e kākoʻo iā lākou. Eia naʻe, ua hanaʻia i ka wā i ho'āʻo ai au.
OK - hiki i kēia ke hoʻopihaʻia. Pono kahi mau wahi kiko'ī e kākoʻo i ka IE 7 aiʻole 8 ma hope aku,ʻo ka emi loa o ka IE6!
No laila,ʻaʻohe mea kūpono i kēia ala. Ke waiho nei wau iʻaneʻi ma keʻano heʻano hoʻolālā o kaʻimi i ka nui o nā mea paʻakikī ma mua o ka pāʻani maikaʻiʻana o kā mākou mau polokalamu kele pūnaewele!
Hoʻopili i kahi Kiʻi Kūlana Kiʻi Ma kahi Mokunaʻuʻuku
Hiki iāʻoe ke hoʻohana i kekahiʻano likeʻole no ka hōʻoleʻana i kahi kiʻi hope i'ōwiliʻia ma kahi o DIV aiʻole kekahi mea ma kāu pūnaewele pūnaewele. He mea hoʻopunipuni kēia e like me kāu e hoʻohana ai i ka hoʻonohonoho kūpono a iʻole e loaʻa i nā kumu hoʻokoe'ē aʻe no nāʻaoʻao'ē aʻe o kāuʻaoʻao.
- E kau i ke kiʻi ma kaʻaoʻao aʻu i makemake ai e hoʻohana i ke kumu.
- I loko o ka pepa maʻamau, hoʻonoho i ka laulā a me ke kiʻekiʻe no ka kiʻi. Eʻikeʻoe, hiki iāʻoe ke hoʻohana i nā pākēneka no ka laulā a iʻole ke kiʻekiʻe, akā, ua maʻalahi au e hoʻololi me nā koina lōʻihi no ke kiʻekiʻe.
img # bg {
ke whānui: 20em;
ke kiʻekiʻe: 30em;
} - E kau i kāuʻike i loko o ka māhele me ka "id" ihirangi "e like me kā mākou i hōʻike ai ma luna nei:
Loaʻa kāu mau mea a pau maʻaneʻi
- ʻO keʻano o ka helu e like me ka laulā like a me ke kiʻekiʻe e like me ke kiʻi ma hope:
ʻoluʻolu #
ke whānui: 20em;
ke kiʻekiʻe: 30em;
} - A laila hoʻonohonoho i ka helu i kahi kiʻekiʻe e like me ke kiʻi. No laila, inā 30m kou kiʻi, loaʻa iāʻoe kahiʻano o luna: -30em; Mai poina e kau i ka helu-index o ka 1 ma ka mea.
#content {
wahi: pili;
luna: -30em;
z-index: 1;
ke whānui: 20em;
ke kiʻekiʻe: 30em;
} - A laila hoʻohui i kahi z-index o -1 no nā mea hoʻohana IE 6, e like me kāu i hana ai ma luna nei:
Eia hou, me ka nui o ka nui o kaʻikeʻana i ka polokalamu kele pūnaewele e kākoʻo nei i kēia manawa,ʻaʻole paha he kumu kūpono a me ka hōʻikeʻiaʻana o kēiaʻano. Inā makemakeʻoe e hoʻohana i kēiaʻano, pono e hōʻoia i kēia i ka nui o nā pūnaewele i hiki iāʻoe.
A inā he nui ka huliʻana o kāu mau mea, ponoʻoe e hoʻololi i ka nui o kāu pahu a me ka kiʻi kumu, a iʻole, e hoʻopauʻoe i nā hualoaʻa'ē aʻe.