Esența problemei
Deseori, designerii folosesc în machetele lor diverse umbre, străluciri și alte elemente cu zone translucide. Când este redat, rezultă o complexitate datorită faptului că transluciditatea png nu este percepută de toate browserele. Unul din canalul alfa neinteligibil este browserul de internet preferat 6. Ca urmare, trebuie să scăpăm de pg-semitransparență, ceea ce este în mod evident incomod în majoritatea cazurilor.
O soluție la problema cu fondul png pentru ie
Panoul de fundal va fi inserat prin stilurile css separat pentru ie6 și separat pentru restul browserelor. În codul html, avem nevoie de un div separate cu id = "png-image".
# png - înălțimea imaginii: 200px; / * valoarea înălțimii și a lățimii este specificată ca mărimea imaginii * /
lățime: 210px;
fundal: url (image.png); / * scrie fundal pentru browserele normale * /
-fundal: nici unul; / * elimina fundalul pentru ie6 * /
-filtru: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'image.png', sizingMethod = 'scară'); / * încărcare pgn semitransparent pentru ie6 * /
>
Iată cum arată:
Acest png este introdus ca fundal pentru bloc.
Asemenea elemente de design ca umbre sau strălucire ar trebui să fie făcute în acest fel.
Dacă modificați dimensiunea blocului cu id = "png-image", png translucid se va întinde sau se va contracta împreună cu blocul.
Png translucid sub forma unei imagini
Dacă o imagine png-transparentă sau semi-transparentă nu este un element de design, atunci ea poate fi arătată în 6, după cum urmează. În html-code introduceți eticheta img obișnuită cu stilul atributului:
Creați fișierul png.htc și salvați-l în folderul img:
De asemenea, aveți nevoie de o transparentă gif-transparent transparent.gif. Trebuie să fie salvat în dosar împreună cu png.htc.
Deci, png noastre arată în ie6 și alte browsere:
Și acest png este introdus de tag-ul img, și nu de fundal.
Articole similare
Trimiteți-le prietenilor: