IE un png attēls caurspīdīgā div elementā.

[Maris-S]

Saskāros ar jaunu (priekš manis) problēmu png bildēm IE pārlūkā. Pārbaudīju IE8, bet domāju ka 7., 6. un 5 ar atbilstošu png caurspīdīguma hacku būs tas pats.

 

Tātad paša png caurspīdīguma atbalsts ir, strādā labi, bet kad png bildīte tiek ielikta div elementā, kam ir filter (daļējas caurspīdības) opcija, tā png bilde paliek tāda dīvaina ar tumšu toni, kādai viņai nevajadzētu būt. Pašai bildei jābūt ar caurspīdīgumu, ja ir bez, tad viss ir kārtībā.

 

<div style="filter:alpha(opacity=100)"><img src="images/transparent_image.png" alt=""></div>

 

Pie tam opacity var būt arī 100, vienīgi ja opacity ir tuvs 0 un neko neredz, tad protams neredz arī problēmu. Šī problēma neizpaužas arī tad, ja div elementam backgroundam piešķir kādu krāsu.

 

<div style="background: lime; filter:alpha(opacity=100)"><img src="images/transparent_image.png" alt=""></div>

 

Mozillā un operā (ar atbilstošajām css caurspīdības vērtībām) viss strādā labi. Varbūt kāds zin, kā varētu pielabot, lai strādātu arī IE pārlūkā?

[mefisto]

http://www.satzansatz.de/cssd/tmp/alphatransparency.html

[Maris-S]

Nē, šīs arī nepalīdz, tāda pati situācija, kā ieliek opacity, tā nestrādā.

[Maris-S]

Principā ir viens risinājums, īstenībā līdzīga pieeja kā piemērā, ko iedeva Mefisto, nepētīju pat kas tur atšķiras īpaši, jo man vienalga tāda pieeja nederēs:

 

div#wrapper { /* block level elements support filters in IE */
opacity:.5; /* for FF, Safari, other browsers */
filter:alpha(opacity=50);
}
span#image{
display:inline-block;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://site/path/to/image.png', sizingMethod='scale');
height:150px; /* what ever width the image is */
width:150px; /* what ever height the image is */
}

 

Avots: http://channel9.msdn.com/forums/TechOff/257324-IE7-alpha-transparent-PNG--opacity

 

Problēma ir tā ka šajā gadījumā jāielādē bilde caur css, bet manā gadījumā bildes mainās ar javascript veidojot slideshowu, iespējams ka arī varēja to līdzīgi atrisināt, bet vieglāk sanāca izveidot bildi ar atbilstošo fonu un neizmantot caurspīdīgumu.

[Maris-S]

Starp citu, kāds nezina kur tajā microsoft mājas lapā ir bug reports, ja tāds vispār ir?

Edited December 2, 2009 by Maris-S

[bubu]

Šeit: http://connect.microsoft.com/

[mefisto]

Tai linkā ko es iedevu, zemak ir "flaws".

Tur ir aprakstītas problēmas.

 

Ja tev vajag slideshow tad tev ir jārēķinās ar šādām fīčām:

* tu nevari izmantio position: relative/absolute tiesā veidā uz elementiem kas satur bildes

* elementiem jābūt ar hasLayout ( http://haslayout.net/haslayout )

* tu nevarēsi izmantot <img /> tagus

* tev būs jāizmanto inline style vai javascrits

 

Ja tu izmanto inline veidā style="" tad tev ir jānosaka browseris server-pusē.

Tevi interesē IE6 un IE7 ( uz 8tā IE viss ir ok ).

 

 

P.S slideshow'os parasti neizmanto semi-transparetus attēlus

[Maris-S]

Bubu, paldies par linku.

 

Mefisto, sorry, pasteidzos, nepaskrollēju uz leju, tā ir ka baigi jāsteidzās. Diemžēl IE8 ir arī tā problēma (nu, ja patiešo samazina opacity, kā rādīju piemēros, bez visādiem hackiem). Lieta tāda ka īpaši es to slideshowu nevaru pārtaisīt, nu varēt varu, bet tas ir no interneta nokopēts javascript kods, nav liels, bet vienalga ātrāk bija iekļaut fona bildi attēlos. Opacity tur tiek izmantots fade efektam, bilde mainās pirmajai lēnām izgaistot un nākošajai lēnām parādoties.

 

Vārdu sakot IE tā arī nav pilnīgi izveidojis png caurspīdīguma atbalstu.

[thesnarkie]

Kāda jēga vispār noņemties ar IE? Tā, manuprāt, ir tikai laika izšķiešana..

[rATRIJS]

Jā - vajag samierināties ar to, ka lietotāji, kuri izmanto vienu no populārākajiem pārlūkiem lapu redzēs tizlu...

[Maris-S]

Thesnarkie, tāpēc ka priekšniecība un lielāka daļa mājas lapas apmeklētāju izmanto populārāko šodienas pārlūku un viņiem būs vienalga ka MS neseko web standartiem un nevar sataisīt bez bugiem savu pārlūku, pat ja uztaisīs, vienalga liela daļa neliks jaunāko versiju, bet saits ir jāuztaisa tāds kāds viņš ir sākotnēji paredzēts.

 

Visumā tomēr daļa patiesības Tavā teiktajā ir, nav jēga noņemties, tikai nevis ar IE problēmām, bet gan ar png caurspīdīgajiem attēliem, pēc šī buga sapratu ka labāk viņus izmantot pēc iespējas retāk, kur nu patiešām tas atvieglos dizaina veidošanu, nevis to sarežģīs.