Maikling impormasyon
Mga bersyon ng CSS
Mga halaga
url Ang value ay ang path sa graphic file, na tinukoy sa loob ng url() construct. Ang landas sa file ay maaaring isulat sa alinman sa mga quote (doble o solong) o wala ang mga ito.none Hindi pinapagana ang larawan sa background para sa elemento.
HTML5 CSS2.1 IE Cr Op Sa Fx
background-image
Modelo ng Bagay
document.getElementById("elementID ").style.backgroundImage
Mga browser
Ang mga bersyon ng Internet Explorer hanggang sa at kabilang ang 7.0 ay naglalapat ng background sa panloob na hangganan ng isang elemento na may set ng property na hasLayout. Kung ang elemento ay walang hasLayout , igagalang ng background-image property ang mga hangganan ng elemento, gaya ng tinukoy sa detalye. Ang pagkakaiba sa display ay kapansin-pansin kung ang mga hangganan ay putol-putol o tuldok sa halip na solid.
Kung nakatakda ang elemento sa pag-scroll o auto , ang Internet Explorer 8 ay magkakaroon ng isang-pixel na vertical na pagkaantala kapag nag-scroll ang background.
none Hindi pinapagana ang larawan sa background para sa elemento.
| 1 | 2 | 3 |
), pagkatapos ay ipinapakita ito ng Chrome, Safari, iOS hindi ayon sa inireseta ng detalye, lalo na para sa bawat cell nang hiwalay. Habang ang browser ay dapat magpakita ng solidong background para sa buong row. Ipinapakita ng Halimbawa 2 ang code na nagpapakita ng error.
Background para sa TR
Ang resulta ng halimbawang ito sa Chrome browser ay ipinapakita sa Fig. 1. Tamang ipinapakita ng mga browser ng Internet Explorer, Opera at Firefox ang background para sa linya (Larawan 2).
kanin. 1. Ulitin ang background para sa bawat cell
| wala | magmana;
| wala Paglalarawan katangian ng background-image.
(mula sa English na “background image” ‒ “background image”)
nagtatakda ng larawan sa background ng elemento
Tandaan
Kapag nagtatakda ng larawan sa background, dapat mo ring tukuyin ang kulay ng background na gagamitin kung hindi available ang larawan. Kung ang isang imahe ay magagamit, ito ay ipinapakita sa ibabaw ng kulay ng background. (Sa ganitong paraan makikita ang kulay sa mga transparent na bahagi ng larawan).
Mga Tuntunin sa Paggamit
[object].style.backgroundImage="[value]";
Suporta sa browser
Pagtutukoy
Mga halaga
Lahat ng mga halaga CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Wala Nagsasaad na walang larawan sa background.
) Tinutukoy ang string ng URI ng imahe sa loob ng "url(...)".
background-image: url(myImage.png);
") Tinutukoy ang image URI string sa loob ng " url(...) ". Ang URI string ay pinaghihiwalay ng " " " DOUBLE QUOTES characters.
background-image: url("myImage.png ");
Inherit Tinutukoy na ang elemento ay dapat magmana ng mga setting ng parent element nito. Paunang halaga:
"wala".
Halimbawa ng paggamit
katangian ng background-image
Larawan sa background
Isang dokumento na may maraming larawan sa background.
Ang disenyo ng website ay nagsisimula sa background. Tamang tukuyin ang isang kulay para sa background - ari-arian kulay ng background , bilang isang safety net kung hindi naglo-load ang larawan. Sa panaklong url()
ipahiwatig ang landas sa folder na may mga larawan.
Bilang default, uulit ang larawan tulad ng isang "tile" hanggang sa mapuno nito ang buong screen ng browser; . Malinaw na ang gayong resulta ay hindi ang taas ng pag-iisip ng disenyo, at hindi tayo magkakaroon ng "banyo", ngunit isang blog lamang, kung saan ang pagiging madaling mabasa ay isang napakahalagang punto.
Ang isang simpleng opsyon upang maalis ang "tileness" ay ang paggamit ng isang malaking larawan, hindi bababa sa 1024 px ang lapad, upang mapuno nito ang buong screen. Magiging magandang solusyon din ang paghahanap ng isang walang putol na texture, kapag pinarami, ang pattern ay magmumukhang isang buo.
Paano gawing mas kaakit-akit ang background?
- Salamat sa Diyos mayroon kaming mga katulong para dito: no-repeat
- – huwag paganahin ang ulitin ulitin-x
- – inuulit ang pattern nang pahalang lamang ulitin-y
– inuulit ang pattern lamang patayo
Halimbawa:
Header ng blog
Ito ay isang background texture na umuulit lamang nang pahalang. Susunod na katulong - ari-arian background-posisyon
, ay nagbibigay-daan sa iyong iposisyon ang larawan sa background kahit saan sa screen. Ang pamamaraan na ito ay laganap sa modernong disenyo ng web. Mayroon kaming isang larawan, ngunit hindi ito bahagi ng nilalaman, ngunit nagsisilbi lamang bilang isang dekorasyon para sa site.
Heading
Isang halimbawa ng hindi umuulit na background na may ibinigay na pagpoposisyon.
Isang beses lang ipinapakita ang larawan at matatagpuan sa kanan.
Ang indent mula sa kanang gilid ay nakatakda sa 200 px upang maiwasan ang pagbangga ng text sa background. Kung gusto naming palaging nakikita ang larawan kapag nag-scroll pababa ang screen, kailangan naming magdagdag ng property sa code sa itaas -
Ano ang pagkakaiba ng img At background-image?
Ang pagkakaiba ay pangunahing, tag img direktang ipinasok sa katawan HTML-pahina at responsable para sa nilalaman (mga larawan, larawan, avatar), nagdadala ng semantic load. Napakahalaga na ang imahe ay na-index ng mga search engine at kasama sa mga resulta ng paghahanap. Mga Katangian CSS background-image– gawing kakaiba at maganda ang site, iyon ay, ito ay isang disenyo na dapat ilipat sa isang panlabas na file CSS estilo o paggamit sa loob ng isang elemento istilo.
Syempre, hindi ibig sabihin nun background-image hindi gagana kung ilalagay sa katawan HTML-mga pahina. Ngunit lubos kong inirerekumenda na ang lahat ng bagay na may kaugnayan sa disenyo ay isinasaalang-alang CSS. Bilang resulta, makakakuha tayo ng malinis HTML-code:
- magkakaroon ito ng positibong epekto sa pag-index ng site; mamahalin ng mga bot sa paghahanap ang iyong site at bisitahin ito nang mas madalas.
- masisiyahan din ang iyong mga bisita, ang site ay maglo-load nang mas mabilis dahil sa magaan ang timbang nito.
- Mas madali para sa iyo, bilang isang webmaster, na magtrabaho gamit ang malinis na code.
Well, isinasaalang-alang namin ang higit pa o mas kaunti sa lahat ng mga opsyon gamit ang property CSS background-image. More practice mga kaibigan! Huwag mag-atubiling kopyahin ang code at gumawa ng sarili mong mga variation!
Sa tingin ko walang isang site kung saan hindi ginagamit ang property Background ng CSS. Mukhang ano ang maaaring mas simple kaysa sa ari-arian na ito? Ngunit hindi, ang mga kakayahan nito ay mas malawak kaysa sa karaniwang pagtatalaga ng isang larawan o kulay bilang isang background ng pahina. Ang ilang mga bagay ay magiging pamilyar, habang ang iba ay malamang na bago sa marami. Sa anumang kaso, magiging kapaki-pakinabang na malaman nang lubusan kung paano gumagana ang background.
Nagdala ang CSS3 ng maraming bagong bagay sa property, tulad ng transparency at pagtatalaga ng ilang larawan bilang background, ngunit pag-uusapan natin ito sa ibaba, ngunit titingnan muna natin ang mga pangunahing kaalaman ng property background.
Tamang tukuyin ang isang kulay para sa background - ari-arian
Mas sigurado ako na naitalaga mo na ang kulay ng background nang higit sa isang beses. Magagawa ito gamit ang ilang uri ng notasyon: regular (ginagamit ang pangalan ng kulay), hexadecimal o RGB notation. Ang bawat uri ay katumbas, gamitin ang alinmang gusto mo. Sinusubukan kong gamitin ang pinakamaikling opsyon, at para sa mas madaling pang-unawa, ang resultang style file ay medyo mas maliit sa laki.
P (kulay ng background: pula;) p (kulay ng background: #f00;) p (kulay ng background: #ff0000;) p (kulay ng background: rgb(255, 0, 0;))
Sinusuportahan ng CSS3 ang transparency, upang maidagdag namin ito sa aming kulay, halimbawa tulad nito:
P (kulay ng background: rgba(255, 0, 0, 0.5);)
Ang huling figure ay nagtakda ng transparency sa 50%. Maaari mong itakda ang halaga ng transparency mula 0 (ganap na transparent na background) hanggang 1 (ganap na opaque).
background-image
Madalas ding ginagamit ang property na ito; Ang CSS3 ay nagdagdag ng kakayahang magtalaga ng maraming larawan sa background, bawat isa ay gumagawa ng sarili nitong layer, kaya ang bawat kasunod na isa ay magkakapatong sa nauna. Bakit ito maaaring maging kapaki-pakinabang? Ang lahat ay medyo simple - sabihin nating kailangan mong i-screw ang mga maliliit na frills sa bawat sulok ng site. Dahil sa mas marami o mas kaunting rubbery na layout, ang paggamit ng isang larawan ay hindi isang opsyon. Samakatuwid, gumawa kami ng 4 na "layer", inilipat ang bawat imahe sa sarili nitong sulok at iyon lang, nalutas ang problema
Body (background-image: url("image1"), url("image2"), url("image3"))
Kung kailangan mong magtalaga ng isang imahe sa background, iniiwan lamang namin ang una sa code, sa palagay ko ito ay naiintindihan.
Kapag gumagamit ng anumang mga larawan bilang background, dapat mong tandaan ang dalawang panuntunan:
- magtakda ng magkakaibang kulay ng background kung sakaling hindi makita ng user ang larawan sa ilang kadahilanan. Maaari lamang nitong i-off ang pagpapakita ng mga larawan, na nakakatipid ng trapiko.
- Huwag gumamit ng background na larawan upang maghatid ng anumang mahalagang impormasyon. Para sa mga kadahilanang nakasaad sa itaas, maaaring hindi ito makita ng user.
Ang suporta para sa maramihang mga larawan sa background ay medyo malawak. Sinusuportahan ng lahat ng browser, maging ang IE8, ang property na ito.
