Bigyan ang iyong visual na interes ng website na may mga background graphics
Ang mga imahe ay isang mahalagang bahagi ng kaakit-akit na mga disenyo ng website. Kabilang dito ang paggamit ng mga larawan sa background. Ang mga ito ay ang mga imahe at graphics na ginagamit sa likod ng mga lugar ng isang pahina na taliwas sa mga imahe na iniharap bilang bahagi ng mga pahina ng nilalaman. Ang mga larawang ito sa background ay maaaring magdagdag ng visual na interes sa isang pahina at matulungan kang makamit ang visual na disenyo na maaaring hinahanap mo sa isang pahina.
Kung nagsisimula kang magtrabaho sa mga larawan sa background, walang alinlangan kang tatakbo sa sitwasyon kung saan mo nais ang isang imahe upang mabatak upang magkasya ang pahina.
Ito ay totoo lalo na para sa mga tumutugon na mga website na naihatid sa isang malawak na hanay ng mga aparato at laki ng screen .
Ang pagnanais na pag-abot ng isang larawan sa background ay isang pangkaraniwang pagnanais para sa mga taga-disenyo ng web dahil hindi ang bawat larawan ay angkop sa espasyo ng isang website. Sa halip ng pagtatakda ng isang nakapirming laki, ang pag-stretch ng imahe ay nagbibigay-daan ito sa ibaluktot upang magkasya ang pahina gaano man kalawak o makitid ang window ng browser .
Ang pinakamahusay na paraan upang mahulma ang isang imahe upang umangkop sa background ng isang pahina ay ang paggamit ng property ng CSS3 , para sa laki ng background. Narito ang isang halimbawa na gumagamit ng isang larawan sa background para sa katawan ng isang pahina at kung saan ay nagtatakda ng laki sa 100% upang palagi itong mabatak upang magkasya sa screen.
katawan {
background: url (bgimage.jpg) no-repeat;
background-size: 100%;
}
Ayon sa caniuse.com, ang property na ito ay gumagana sa IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, at sa lahat ng mga pangunahing mobile browser. Ito ay sumasaklaw sa iyo para sa lahat ng mga modernong browser na magagamit ngayon, na nangangahulugan na dapat mong gamitin ang ari-arian na ito nang walang takot na hindi ito gagana sa screen ng isang tao.
Pag-faking a Stretched Background sa Older Browsers
Malamang na malamang na kailangan mong suportahan ang anumang mga browser na mas matanda kaysa sa IE9, ngunit ipagpalagay nating nababahala ka na hindi sinusuportahan ng IE8 ang ari-arian na ito. Sa pagkakataong iyon, maaari mong i-pekeng background. At maaari mong gamitin ang prefix ng browser para sa Firefox 3.6 (-moz-background-laki) at Opera 10.0 (-o-background-laki).
Ang pinakamadaling paraan upang peke ang isang nakabukas na larawan sa background ay upang mabatak ito sa buong pahina. Pagkatapos ay hindi ka magtapos ng labis na espasyo o mag-alala na ang iyong teksto ay naaangkop sa nakaunat na lugar. Narito kung paano ito gagawin:
id = "bg" />
- Una, siguraduhin na ang lahat ng mga browser ay may 100% taas, 0 margin, at 0 padding sa elemento at HTML BODY. Ilagay ang sumusunod sa ulo ng iyong HTML na dokumento:
- Idagdag ang imaheng nais mong maging background bilang unang elemento ng web page, at bigyan ito ng id ng "bg":
- Ilagay ang larawan sa background upang maayos ito sa tuktok at kaliwa at 100% na lapad at 100% na taas. Idagdag ito sa iyong style sheet:
img # bg {
posisyon: naayos;
itaas: 0;
kaliwa: 0;
lapad: 100%;
taas: 100%;
} - Idagdag ang lahat ng iyong nilalaman sa pahina sa loob ng isang elemento ng DIV na may isang id ng "nilalaman". Idagdag ang DIV sa ibaba ng larawan:
Tandaan: kawili-wiling upang tingnan ang iyong pahina ngayon. Dapat ipakita ang larawan na nakaunat, ngunit ang iyong nilalaman ay ganap na nawawala. Bakit? Dahil ang imahe sa background ay 100% sa taas, at ang nilalaman na dibisyon ay pagkatapos ng imahe sa daloy ng dokumento - hindi lalabas ang karamihan sa mga browser.Ang lahat ng nilalaman mo dito - kabilang ang mga header, mga talata, atbp.
- Puwesto ang iyong nilalaman upang ito ay kamag-anak at may z-index ng 1. Ito ay magdadala nito sa itaas ng larawan sa background sa mga pamantayan na sumusunod sa mga browser. Idagdag ito sa iyong style sheet:
#content {
posisyon: kamag-anak;
z-index: 1;
}
- Ngunit hindi ka nagawa. Ang Internet Explorer 6 ay hindi sumusunod sa mga pamantayan at mayroon pa ring mga problema. Maraming mga paraan upang itago ang CSS mula sa bawat browser ngunit IE6, ngunit ang pinakamadaling (at pinakamababang posibleng maging sanhi ng iba pang mga problema) ay ang paggamit ng mga kondisyon na komento. Ilagay ang mga sumusunod pagkatapos ng iyong stylesheet sa ulo ng iyong dokumento:
- Sa loob ng naka-highlight na komento, magdagdag ng isa pang estilo ng sheet na may ilang mga estilo upang makakuha ng IE 6 upang i-play maganda:
- Maging sigurado na subukan sa IE 7 at IE 8 pati na rin. Maaaring kailanganin mong ayusin ang mga komento upang suportahan ang mga ito pati na rin. Gayunpaman, nagtrabaho ito nang subukan ko ito.
OK - ito ay tinatanggap na WAY overkill. Napakakaunting mga site na kailangan upang suportahan ang IE 7 o 8 na ngayon, mas mababa IE6!
Dahil dito, ang pamamaraan na ito ay luma at malamang na hindi kinakailangan para sa iyo. Iniwan ko ito dito higit pa bilang isang modelo ng pag-usisa tungkol sa kung gaano mas mahirap ang mga bagay bago ang lahat ng aming mga browser na nag-play kaya mahusay na magkasama!
Pagkalansag ng Larawan na Pinalawig na Background Higit sa Mas Maliit na Space
Maaari mong gamitin ang isang katulad na pamamaraan upang pekeng isang naka-stretch na larawan sa background sa isang DIV o isa pang elemento sa iyong web page. Ito ay isang bit trickier bilang mayroon ka upang gamitin ang alinman sa ganap na pagpoposisyon o magkaroon ng kakaibang mga isyu sa spacing para sa iba pang mga bahagi ng iyong pahina.
- Ilagay ang imahe sa pahina na gusto kong gamitin bilang background.
- Sa style sheet, itakda ang isang lapad at taas para sa imahe. Tandaan, maaari mong gamitin ang mga porsyento para sa lapad o taas, ngunit mas madaling mahanap ang mga halaga para sa taas.
img # bg {
lapad: 20em;
taas: 30em;
} - Ilagay ang iyong nilalaman sa isang div na may id na "nilalaman" tulad ng ginawa namin sa itaas:
Ang lahat ng nilalaman mo dito
- I-estilo ang div ng nilalaman upang maging parehong lapad at taas bilang larawan sa background:
div # content {
lapad: 20em;
taas: 30em;
} - Pagkatapos ay iposisyon ang nilalaman hanggang sa parehong taas ng imahe. Kaya kung ang iyong imahe ay 30em ikaw ay may isang estilo ng tuktok: -30em; Huwag kalimutang maglagay ng z-index ng 1 sa nilalaman.
#content {
posisyon: kamag-anak;
itaas: -30em;
z-index: 1;
lapad: 20em;
taas: 30em;
} - Pagkatapos ay idagdag sa isang z-index ng -1 para sa IE 6 na mga gumagamit, tulad ng ginawa mo sa itaas:
Muli, na may sukat sa background na tinatangkilik ang malawak na suporta ng browser na ito ngayon, ang diskarte na ito ay malamang na hindi kinakailangan at iniharap bilang isang produkto ng isang nakalipas na panahon. Kung nais mong gamitin ang diskarte na ito, siguraduhin na subukan ito sa maraming mga browser hangga't maaari.
At kung ang laki ng iyong nilalaman ay magbabago, kakailanganin mong baguhin ang laki ng iyong lalagyan at larawan sa background, kung hindi man, makakapunta ka sa mga kakaibang resulta.