Kapag nagtatrabaho ka sa disenyo ng website, madalas mong kailangang harapin ang katotohanan na ang nakitang larawan, na akma sa iyong site, ay may ibang background na gusto mong alisin.
At kaya, binuksan namin ang aming larawan sa Photoshop.
1.
Ang unang bagay na dapat gawin ay lumikha ng isang workspace para sa imahe na may isang transparent na background. Para dito:
- sa window ng mga layer, i-double click ang aming layer (na may lock)
- I-click ang OK sa window na lalabas.
Dapat mawala ang lock
Kung ang background ay plain:
Piliin ang tool " magic wand” ay isang napaka-flexible na tool para sa pagpili ng gustong lugar. Ang aming gawain ay piliin ang buong background, maliban sa larawan. Upang gawin ito, ayusin ang mga setting ng magic wand (parameter pagpaparaya) hanggang makuha natin ang ninanais na resulta. Ginagamit din namin ang Shift key upang pumili ng isang lugar bilang karagdagan sa napili na. Pindutin ang Del at ang napiling lugar ay tatanggalin.
Kung ang background ay maraming kulay:
Ginagamit namin ang tool Mabilis na Pagpili". Narito ang aming gawain ay hindi upang i-highlight ang background, ngunit ang bagay mismo, na dapat manatili. Pindutin hanggang sa ma-highlight ang gustong lugar. Kung ang labis ay naka-highlight, pindutin nang matagal ang Alt at bawasan ang lugar. Maaari mong tingnan ang resulta gamit ang Q key.
Kapag handa na ang pagpili, kopyahin ito gamit ang Ctrl+C. Lumikha ng isang bagong dokumento na may isang transparent na background (Ctrl + N) at i-paste ang bagay doon Ctrl + V.
3 . Kung mayroong labis na natitira sa larawan, gamitin ang tool " Pambura“, i-overwrite lang ang sobrang background.
4 . I-save ang larawan para sa Web (Alt + Shift + Ctrl + S) piliin ang GIF o PNG na format (sa iba, ang aming transparent na background ay magiging puti).
Kapaki-pakinabang na video sa paksa:
Minsan maaaring gusto ng user ang isang PNG na imahe na may transparent na background. Gayunpaman, ang kinakailangang file ay hindi palaging tumutugma sa mga kinakailangang parameter. Sa kasong ito, kailangan mong baguhin ito sa iyong sarili o pumili ng bago. Tulad ng para sa paglikha ng isang transparent na background, ang mga espesyal na serbisyo sa online ay makakatulong upang maisagawa ang gawaing ito.
Ang pamamaraan para sa paglikha ng isang transparent na background ay nagpapahiwatig ng pag-alis ng lahat ng mga hindi kinakailangang bagay, habang iniiwan lamang ang kinakailangang isa, at ang nais na epekto ay lilitaw sa lugar ng mga lumang elemento. Iminumungkahi namin na maging pamilyar ka sa mga mapagkukunan ng Internet na nagbibigay-daan sa iyong ipatupad ang naturang proseso.
Ang graphic editor na LunaPic ay gumagana online at nagbibigay sa user ng maraming uri ng mga tool at function, kabilang ang pagpapalit ng background. Ang layunin ay nakamit tulad ng sumusunod:
Kinukumpleto nito ang gawain sa serbisyo ng LunaPic. Salamat sa mga tagubilin sa itaas, madali mong gawing transparent ang background. Ang tanging disbentaha ng serbisyo ay gumagana lamang ito ng tama sa mga guhit kung saan ang background ay pangunahing puno ng isang kulay.
Unawain natin ang site ng PhotoScissors. Walang ganoong problema dito na ang mahusay na pagproseso ay makukuha lamang sa ilang mga larawan, dahil ikaw mismo ang nagtakda ng lugar na pinutol. Ang pagproseso ay isinasagawa tulad ng sumusunod:
Kinukumpleto nito ang gawain gamit ang online na mapagkukunang PhotoScissors. Tulad ng nakikita mo, walang kumplikado sa pamamahala nito, kahit na ang isang walang karanasan na gumagamit na walang karagdagang kaalaman at kasanayan ay mauunawaan ang gawain.
Kamakailan, ang website ng Remove.bg ay nasa mga labi ng marami. Ang katotohanan ay ang mga developer ay nagbibigay ng isang natatanging algorithm na awtomatikong pinutol ang background, nag-iiwan lamang ng isang tao sa imahe. Sa kasamaang palad, dito nagtatapos ang mga kakayahan ng serbisyo sa web, ngunit ito ay isang mahusay na trabaho sa pagproseso ng mga naturang larawan. Tingnan natin ang prosesong ito nang mas malapitan:
Dito dumating ang aming artikulo sa lohikal na konklusyon nito. Ngayon sinubukan naming sabihin sa iyo ang tungkol sa mga pinakasikat na serbisyo sa online na nagbibigay-daan sa iyong gawing transparent ang background sa isang larawan sa ilang pag-click lang. Umaasa kaming nagustuhan mo ang kahit isang site.
Ang pangunahing bagay ay upang tukuyin ang isang larawan sa iyong computer o telepono, at pagkatapos ay i-click ang OK na pindutan sa ibaba ng pahinang ito. Bilang default, ang payak na background ng larawan ay pinapalitan ng isang transparent. Ang kulay ng background ng orihinal na imahe ay awtomatikong tinutukoy, kailangan mo lamang na tukuyin sa mga setting kung anong kulay ang papalitan nito. Ang pangunahing parameter na nakakaapekto sa kalidad ng pagpapalit ay ang "Intensity ng pagpapalit" at maaaring iba ito para sa bawat larawan.
Isang halimbawa ng larawan ng rosas na rosas na walang pagbabago at pagkatapos palitan ang solid na background ng transparent, puti at berde:
Unang halimbawa na may bulaklak na rosas sa isang transparent na background ay ginawa gamit ang mga sumusunod na setting:
1) Pagpapalit intensity - 38;
2) Smoothing sa paligid ng mga gilid - 5;
3) Palitan ang solid na background ng isang transparent;
4) Pag-crop (<0) или Добавление (>0) kasama ang mga gilid - "-70";
5) Baliktarin - hindi pinagana (check not checked).
Para sa paglikha pangalawang halimbawa, na may puting background, ang parehong mga setting ay ginamit tulad ng sa unang halimbawa, maliban sa parameter: "Palitan ang plain background ng" - puti. AT ikatlong halimbawa, na may berdeng background, ginagamit din ang mga setting, tulad ng sa unang halimbawa, maliban sa parameter: "kulay sa hex na format" - #245a2d.
Ang orihinal na larawan ay hindi binago sa anumang paraan. Bibigyan ka ng isa pang naprosesong larawan na may transparent na background o background na iyong tinukoy.
Maaaring kailanganin ng ilang user na gumawa ng transparent na background sa ilang larawan. Maaaring ito ay dahil sa mga pagsasaalang-alang sa aesthetic, ang pangangailangan na lumikha ng isang watermark para sa mga layuning pangkomersyo at iba pang mga kadahilanan - ang katotohanan ay hindi alam ng gumagamit kung paano, at kung ano, magagawa ito. Sa artikulong ito, susubukan kong tulungan ang mga naturang user at sasabihin sa iyo kung paano gumawa ng isang transparent na background online, anong mga serbisyo ang umiiral para dito, at kung paano gamitin ang mga ito.
Mayroong ilang mga serbisyo sa network na nagbibigay-daan sa iyong alisin ang background ng isang larawan online nang libre. Kasabay nito, lahat ng mga ito ay may medyo simpleng mga tool, na nagpapahintulot sa iyo na alisin ang background ng mga larawan sa halos ilang mga pag-click. Sa ibaba ay ililista ko ang mga serbisyong ito na may detalyadong paglalarawan ng kanilang pag-andar.
Kung ikaw, tulad ko, ay may pagnanais, pagkatapos ay nagmamadali akong pasayahin ka, sinubukan ko ang karamihan sa kanila at nag-compile ng isang listahan ng pinakamahusay (sa link sa itaas).
Ang unang mapagkukunan na nagbibigay-daan sa iyong lumikha ng isang transparent na background online ay Online-Photoshop. Ang paggawa nito ay medyo simple, na nagbibigay-daan sa iyong makakuha ng isang bagay na may transparent na background sa iyong larawan sa loob ng ilang minuto.
Ngayon ay pinindot namin ang arrow sa kanan at tingnan ang resulta. Kung maayos ang lahat, mag-click sa pindutang "I-download" sa itaas at i-save ang resulta sa iyong PC.
Ang isa pang tool para gumawa ng transparent na background online ay ang Photoshop-like Pixlr online editor. Ito ay may malaking bilang ng mga tampok, ngunit kami ay pangunahing interesado sa paglikha ng isang transparent na background online.
Ang serbisyong ito ay halos ganap na automated na opsyon na nagbibigay-daan sa iyong gawing transparent ang background online.
Upang magtrabaho kasama ang serbisyo, pumunta dito, mag-click sa pindutan ng "Browse", siguraduhin na ang pagpipiliang "Palitan ang plain background na may" ay nakatakda sa "Transparent" at mag-click sa malaking "OK" na pindutan sa ibaba.
Pagkatapos ng pagproseso, magagawa mong tingnan ang resulta o i-download ito sa iyong computer gamit ang naaangkop na mga link.
Tandaan ko na dahil sa automation, ang kalidad ng resultang pagpoproseso ay karaniwang mas malala kaysa sa Online-Photoshop at Pixlr na nakalista sa itaas.
Isa pang serbisyo na nagbibigay-daan sa iyong gumawa ng transparent na background sa isang larawan online nang libre.
Upang gumana sa serbisyong ito, kailangan mong maghanda ng isang larawan, kung saan kailangan mong magpinta sa isang potensyal na transparent na lugar na may kulay na wala sa larawan mismo (halimbawa, asul, tulad ng ipinapakita sa halimbawa sa ibaba). Mahalaga rin na ang larawan ay nasa png o gif na format.
Ang serbisyong ito para sa paglikha ng isang transparent na background ay katulad sa pag-andar nito sa nakaraang isa, na nangangailangan ng isang background na ginawa sa isang kulay. Binabago nito ang kulay na ito sa isang transparent na background, na nakakakuha ng imahe na kinakailangan ng user.
Kung ikukumpara sa serbisyo ng Watermark.Algid.Net, ang serbisyo ng LunaPic ay mas katulad ng isang ganap na editor ng larawan, na nagbibigay-daan sa iyong ipinta ang background gamit ang isang kulay gamit ang mga tool na binuo sa serbisyong ito.
Sa itaas, naglista ako ng ilang maginhawa at madaling gamitin na serbisyo na nagbibigay-daan sa iyong gumawa ng transparent na background online. Ang pinaka-epektibo, sa palagay ko, ay ang mga serbisyong Online-Photoshop at Pixlr, ang mga resulta ng kanilang pagproseso ay nasa isang mahusay na antas, at ang mga detalye ng opsyonal ay hindi naman kumplikado. Kung kailangan mong gumawa ng isang transparent na background para sa isang larawan, inirerekumenda ko ang paggamit ng mga kakayahan ng mga tool na ito, papayagan ka nitong madali at mabilis na lumikha ng isang transparent na background online.
Bukod dito, bilang isang libreng format, nag-aalok ang PNG sa web designer ng iba't ibang praktikal na mga pakinabang sa GIF:
Mahalagang tandaan na hindi pinapayagan ng PNG ang animation, gaya ng ginagawa ng GIF. Ngunit mayroong isang pamantayang Multiple-image Network Graphics (MNG) na nagpapahintulot nito, ngunit hindi ito malawak na sinusuportahan ng mga web browser at mga editor ng larawan.
Marahil ay nagtataka ka kung bakit hindi gaanong ginagamit ang PNG sa web kung kasing ganda ito ng ina-advertise. Ang sagot ay, para sa karamihan, isang maling kuru-kuro tungkol sa format at suporta sa browser nito.
Dahil hindi sinusuportahan ng Internet Explorer 6 at mas maaga ang buong hanay ng mga kakayahan ng PNG (kabilang ang transparency ng alpha channel), pinababayaan ang mga tao na maniwala (bagaman hindi totoo) na hindi talaga sinusuportahan ng Internet Explorer ang PNG, o hindi bababa sa hindi sumusuporta sa transparency. Sa katunayan, sapat na sinusuportahan ng Internet Explorer 5 at 6 ang detalye ng PNG upang gawin itong katumbas sa pagganap (o higit pa) sa mga hindi animated na GIF na imahe. Ang lahat ng iba pang nabanggit na browser, kabilang ang Firefox, Netscape 6 at mas bago, Mozilla, Opera 6 at mas mataas, Safari, at Camino ay ganap na sumusuporta sa PNG transparency.
Bukod sa maling kuru-kuro na ito tungkol sa suporta sa browser, ang naka-embed na GIF animation ay (at patuloy na) isang pangunahing dahilan para sa tagumpay nito. Bagaman, sa paglipas ng mga taon, ang paggamit ng GIF ay naging hindi gaanong popular kumpara sa iba pang mga teknolohiya (hal. Flash), na nagiging mas angkop para sa animation.
Ang transparency ay isang pangunahing katangian ng mga GIF at PNG at kadalasan ang dahilan kung bakit pinipili ng isang web designer kung aling format ang gagamitin. Bagama't nag-aalok ang PNG ng mas komprehensibong suporta sa transparency, ang mga web designer ay madalas na kailangang gumawa ng mga GIF na bersyon ng mga imahe upang magkasya sa mga mas lumang browser. Posible ang paggamit ng CSS (at medyo walang halaga) sa pamamagitan ng pagpapadala ng mga GIF na larawan para sa mga mas lumang browser at mataas na kalidad na PNG sa mga browser na nakakaunawa sa kanila. Ngunit ito ay dobleng trabaho para sa isang web designer, at bilang isang resulta, ang mga tao ay hindi gaanong lumalaban at patuloy na gumagamit ng mga larawang GIF.
Kaya, tiningnan namin ang ilang dahilan kung bakit sikat pa rin ang GIF, ngunit karamihan sa mga ito ay batay sa hindi pagkakaunawaan sa mga konsepto o paggamit ng pamilyar na daloy ng trabaho. Gamit ang ilang pangunahing kaalaman sa PNG at kung paano ito magagamit nang mapagkakatiwalaan sa mga browser, nasa posisyon ka upang samantalahin ang lahat ng mga benepisyong inaalok nito.
Ang JPEG ay isa pang ubiquitous na format ng web at sa karamihan ng mga kaso, gaya ng mga larawan (o katulad nito), mas maganda pa ito kaysa PNG o GIF. Hindi nilayon ang PNG na makipagkumpitensya sa JPEG. Ginagawang mas maliit ng JPEG compression ang mga file kaysa sa PNG kapag gumagana ito sa mga larawan. Sa kabilang banda, ang PNG ay gumagawa ng mas maliliit na file kapag may text, artistikong linya, logo, "solid" na kulay, atbp. sa loob ng mga larawan.
Ngayon tingnan natin kung paano gamitin ang PNG sa disenyo ng web. Nakolekta ko ang lahat ng mga file para sa bawat halimbawa sa isang hiwalay na folder na magagamit sa mga kaibigan ni ED.
Sa nakalipas na ilang taon, ang isang gradient - isang maayos na paglipat sa pagitan ng dalawa o higit pang mga kulay - ay naging matalik na kaibigan ng isang web designer. Lalo na sikat ang mga banayad, banayad na gradient fill na lumilikha ng isang pakiramdam ng lalim at pagkakayari nang hindi kapansin-pansin.
Minsan ang GIF ay ang pinakamahusay na pagpipilian para sa isang gradient. Kung ang gradient ay isang simpleng paglipat ng dalawang kulay, ang GIF ay gumagana nang walang kamali-mali dito. Gayunpaman, ang limitasyon ng GIF sa 256 na kulay lamang ay kadalasang lumilikha ng isang kapansin-pansin at magulo na "pag-band" sa mga mas kumplikadong gradient transition. Ang JPEG, sa kabilang banda, ay maaaring makagawa ng medyo maayos na mga gradient, ngunit kadalasan sa halaga ng mas malaking sukat ng file. At habang ang mga JPEG gradient sa pangkalahatan ay sapat na mabuti, tandaan na ang JPEG ay gumagamit ng lossy compression, na nangangahulugang ang magreresultang imahe ay hindi kailanman tutugma sa kalidad ng hindi naka-compress na imahe.
Ang karaniwang background gradient style na pinag-uusapan ay ginagamit para sa mga button, kahon, o kahit saan pa. Ito ay maaaring magmukhang Figure 5-1. Clockwise, mula sa kaliwang itaas, nakikita namin ang orihinal (hindi naka-compress) na imahe, ang GIF na bersyon, ang PNG na bersyon, at ang JPEG. Makikita mo na ang PNG ay may pinakamaliit na sukat (515 bytes) sa resulta. Ito ay apat na beses na mas maliit kaysa sa GIF na imahe. Ang JPEG ay bahagyang mas malaki kaysa sa PNG sa 637 bytes at mas mababa din ang kalidad dahil sa lossy compression (bagaman ang kakayahan ng mata ng tao na matukoy ang pagkakaiba sa kalidad sa simpleng halimbawang ito ay kaduda-dudang).
Larawan 5-1
Panel ng Photoshop - I-save Para sa Web,
nagpapakita ng mga pagkakaiba sa laki ng file para sa parehong larawan sa iba't ibang format
Minsan ito ay kinakailangan upang lumikha ng isang imahe na gumaganap ng pareho sa iba't ibang mga substrate. Ang ilang karaniwang halimbawa ay mga logo at icon. Ang mga sitwasyong ito ay tradisyonal na pinangungunahan ng mga GIF, ngunit may ilang mga dahilan kung bakit ang PNG ay maaaring maging isang mas mahusay na pagpipilian sa sitwasyong ito. Ang PNG ay may posibilidad na manalo sa laki ng file para sa mga logo o ilang iba pang simpleng "sining". Bilang karagdagan, ang likas na transparency ng PNG ay nagpapadali sa paggawa ng mga solong file na gumagana sa ibabaw ng anumang background. Nag-aalok ang PNG ng binary transparency tulad ng GIF, ngunit nagbibigay din ng mas kanais-nais na opsyon na may alpha channel, kung saan ang mga pixel ay maaaring bahagyang transparent sa halip na maging on o off lang. Ang paggamit sa huli ay nagpapataas ng laki ng file, kung minsan ay higit pa sa isang GIF na may binary na transparency, ngunit nagbibigay-daan ito sa pagpapakinis sa mga gilid ng iyong larawan at ginagawang mas eleganteng ilagay ito sa isang background.
Gayunpaman, inayos ko muli ang kanilang konsepto gamit ang isang puting imahe na may mga simbolo ng stencil. Gumamit sila ng puting simbolo sa isang transparent na background, na kadalasan ay maaaring maging epektibo. Sa kasong ito, ang iyong background kulay ng css ay lilitaw sa isang parisukat o hugis-parihaba na lugar sa paligid ng simbolo, sa halip na ang simbolo mismo.
Parehong gumamit sina Dan at PJ ng transparent na GIF sa halip na PNG. Ito ay ganap na sumaklaw sa kanilang mga pangangailangan, at kailangan nilang lumikha ng mga pixelated na imahe para sa estilo ng mga icon. Sa PNG, maaari kang makakuha ng katulad na pamamaraan, ngunit sa karagdagang benepisyo ng anti-aliasing at bahagyang transparency para sa paggamit sa mas detalyadong mga icon.
Alam ko kung ano ang iniisip mo: lahat ng PNG transparency ay mukhang maganda, ngunit praktikal ba ito?
Ang magandang balita ay ganap na sinusuportahan ng lahat ng modernong browser ang mga larawang PNG, kabilang ang transparency ng alpha channel, ang mga benepisyong ipinakita ko sa mga halimbawa. Gagawin ng Safari (lahat ng bersyon), Firefox (lahat ng bersyon), Opera (bersyon 6 at pataas), Netscape (bersyon 6 at pataas), at Mozilla (lahat ng bersyon) ang lahat ng ipagagawa ko sa kanila nang may malakas na putok. Ngunit ang masamang balita ay ang isang browser na hindi ko pa nababanggit na karamihan sa iyong mga gumagamit ay may: Internet Explorer.
Hindi sinusuportahan ng Internet Explorer 6 at mas mababa ang alpha channel transparency na naka-embed sa PNG na format. Dahil ang pagpili ng browser (o hindi pagpipilian) ay ginawa para sa karamihan ng maraming mga web surfers, ang nakanganga na butas na ito ay nagpanatiling malayo sa mga taga-disenyo ng web mula sa PNG. Ngunit, sa paglabas ng Internet Explorer 7, nakakuha kami ng buong suporta para sa PNG alpha transparency sa lahat ng pangunahing browser. Ano ang susunod, mayroon bang mga paraan upang gumana sa PNG alpha transparency sa Internet Explorer 6 at mas mababa? Kaya, kung gusto mong gamitin ang epektong ito, walang makakapigil sa iyo. Ang Internet Explorer 6 at ang mga naunang bersyon ay nangangailangan ng higit sa sapat na atensyon, ngunit tiyak na posible ito.
Ang Internet Explorer ay may iba't ibang katutubong filter. Ginagamit ang mga ito sa CSS, ngunit hindi sila bahagi ng opisyal na detalye ng CSS. Sa madaling salita, hindi sila na-standardize sa web. Sa kasamaang palad, ang Internet Explorer 6 at mas mababa ay hindi ganap na sumusuporta sa PNG na format (na inirerekomenda ng W3C), ang Microsoft ay may isang filter na nag-aayos ng pagkukulang na ito: AlphaImageLoader.
Ayon sa isang seksyon sa opisyal na website ng Microsoft, ang AlphaImageLoader ay "nagpapakita ng isang imahe sa loob ng mga hangganan ng isang bagay at sa pagitan ng background ng bagay at nilalaman nito." Sa madaling salita, ang AlphaImageLoader ay naglo-load ng isang PNG na imahe na may buong transparency, ngunit nilo-load ito bilang sarili nitong layer, sa ibaba kung saan ay ang nilalaman ng bagay kung saan ito inilapat. Ang mga larawang PNG na na-load sa ganitong paraan ay kumikilos nang higit na parang mga larawan sa background kaysa sa mga larawan sa foreground (bagama't sila ay aktwal na "umupo" sa ibabaw ng background ng bagay).
Sa pangkalahatan, maaari mo lamang ilapat ang AlphaImageLoader sa CSS sa mga elemento ng img at tamasahin ang resulta. Ang imahe ay unang mai-load, ang transparency ay mananatili, ngunit pagkatapos ay ang imahe ay ilo-load muli - bilang ang nilalaman sa harap ng bagay - na may mga opaque na lugar (kaya "nagtatabing" sa iyong transparent na bersyon).
Hindi ka maaaring gumamit ng transparent na PNG bilang background larawan ng css para sa isang (X) HTML na elemento (sabihin para sa
Bumalik tayo sa isa sa mga naunang halimbawa at subukang i-load ito nang tama sa Internet Explorer. Tandaan ang Channel 49, ang istasyon ng TV sa Topeka? Sigurado akong oo. Ipinapakita ng Figure 5-21 kung ano ang hitsura ng site sa Internet Explorer 6.
Larawan 5-21
49abcnews.com headline na nai-render sa Internet Explorer 6 para sa Windows, na may PNG transparency buo.
Ang HTML para sa tuktok na nauugnay sa panahon ay mukhang nahulaan mo na:
Kasalukuyang nasa Topeka, KS:
82°
Kunin ang hula at higit pa...
Nakikita mo ang isang imahe, at ito ay tiyak na isang PNG, kahit na ang Internet Explorer ay naglo-load nito nang walang kamali-mali. Ang lihim na sangkap nito ay JavaScript. Sa katunayan, gumamit ako ng kaunting DOM scripting upang alisin ang elemento ng img sa mabilisang at palitan ito ng isang elemento ng div na - nahulaan mo ito - ay gumagamit ng AlphaImageLoader. Inilalarawan ang JavaScript sa loob ng mga kondisyong komento, isa pang madaling gamitin ngunit ganap na hindi pamantayang idyoma mula sa Microsoft na binuo sa Internet Explorer. Nagbibigay-daan sa iyo ang mga komentong may kundisyon na gumamit ng code para lamang sa isang kilalang bersyon ng Internet Explorer. Ang code ay binabalewala ng lahat ng iba pang mga browser, kaya hindi ito nakakaapekto sa kanila sa anumang paraan. Sa elemento
website www.49abcnews.com, makikita mo ang:
Salamat sa unang linya, kung lte IE6, ang script na ito ay isasama lamang sa nai-render na dokumento kung ito ay ipinapakita sa isang bersyon ng Internet Explorer na mas mababa sa o katumbas ng (tinukoy sa lte) 6. Lahat ng iba pang mga browser, kabilang ang bagong dating na Internet Explorer 7, ay ganap na papansinin ito.
Kaya ano ang nasa fixWeatherPng.js JavaScript file? Tignan natin:
Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale""; // Ang ilang 49abcnews.com na partikular na estilo ng CSS ay tinanggal para sa maikli. img.replaceNode(div); )
Suriin natin, hakbang-hakbang, kung ano ang ginagawa ng script. Una, sasabihin namin sa browser na gusto naming isagawa ang function na fixWeatherPng kapag nag-load ang page. Ang natitirang bahagi ng script ay ang function mismo.
Upang magsimula, hahanapin muna natin ang larawang gagawin natin sa pamamagitan ng id attribute nito at iimbak ito sa img variable. Iniimbak namin ang src attribute (URL sa image file) sa src variable. Pagkatapos ay itatago namin ang elemento ng img sa pamamagitan ng pagtatakda ng visibility CSS property sa hidden.
Pinapalitan namin ang orihinal na elemento ng img (na nakatago) ng isang bagong likhang elemento ng div na matagumpay na nakakabit dito ang AlphaImageLoader.
Gamit ang DOM scripting para i-inject ang iyong AlphaImageLoader - pag-filter ng mga bit on the fly - ay may masama ngunit kinakailangang bahagi - masamang CSS. Higit pa rito, ang mga non-semantic na elemento ng div ay lalagyan sa labas ng iyong (X)HTML markup. At hangga't ang lahat ng ito ay inilalarawan sa loob ng mga kondisyong komento, walang pagkakataon para sa ibang mga browser na masira ng code ng Microsoft. (handyblogger: Dito sinusubukan ni Jeff na dahan-dahang ituro ang isang "clumsy" na solusyon mula sa Microsoft)
Kung kailangan mong gumawa ng isang bagay na hindi tama, hindi bababa sa maaari mong kunin ito at panatilihin itong hiwalay sa lahat ng bagay na hindi nangangailangan nito.
Ang PNG, bilang isang format ng graphics, ay nag-aalok ng maraming teknikal na pakinabang na higit pa sa malawakang ginagamit sa mga GIF. Sa katunayan, napakaganda ng mga benepisyo na maaaring matagal nang kinuha ang PNG bilang isang graphic na format na walang kaugnayan sa mga larawang larawan. Ang kakulangan ng suporta ng Internet Explorer para sa ilan sa mga mas makabuluhang tampok na PNG, tulad ng alpha channel transparency, ay nagpatay sa maraming web developer bilang resulta. Ngunit may dalawang napakagandang dahilan kung bakit hindi ka dapat matakot sa PNG.
Una, kahit na ang Internet Explorer 6 at ang mga naunang bersyon nito ay halos ganap na sumusuporta sa PNG sa mga tuntunin ng kung ano ang magagawa ng GIF (maliban sa animation, siyempre). Ang PNG ay halos palaging nagpapakita ng mas maliit na laki ng file, na nagpapahintulot sa kanila na mag-load nang mas mabilis at gumamit ng mas kaunting mga mapagkukunan.
Pangalawa, nag-aalok ang Internet Explorer 7 ng buong suporta para sa PNG alpha transparency. Ang mga epekto na maaaring makamit sa buong gamut ng mga translucent na opsyon ay halos walang limitasyon. Inaasahan ko na ang mga taga-disenyo na nakahanap ng mga kawili-wiling paraan upang magamit ang transparency ng PNG, kasama ang mga linya ng mga inilarawan sa artikulong ito, ay magbubukas ng pinto sa isang bagong antas ng mga estilo na hindi pa nakikita. Binigyan kita ng ilang kapaki-pakinabang na ideya kung ano ang magagawa mo gamit ang PNG transparency, ngunit huwag tumigil doon. Hanapin mo sarili mo!
Isang sipi mula sa Web Standards Creativity ni Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, at Rob Weychert; nai-post ng mga kaibigan ni ED. Copyright Jeff Croft 2007. Ginamit nang may pahintulot mula sa Apress, Inc.
