Priehladné PNG – CSS – Fórum – Programujte.com

dá na vo firefoxe,opere a IE7 nastaviť nepriehladné png na priehladné???

Co tím myslíš? Pokud máš png uložené jako průhledné tak se taky jako průhledné zobrazí. Když ne tak ne...můžeš ho pak částečně zprůhlednit celé, ale to jde pro všechny typy obrázků - pohraješ si s opacity...

ale IE sa dost hneva s priehladnymi PNG obrazkami (IE 6 - co je este stale najpouzivanejsi prehliadac - priehladnost ignoruje)

To greppi : Jo jo ignoruje, další důvod ho nemít (IE6 je prostě paskvil), ale dnes už se pro IE6 ani moc neoptimalizuje...i když tuším, že se to u png dá nějak ošetřit...
Pak už mě napdá alternativa uložit to do gifu.

To Nefaritus :

ale dnes už se pro IE6 ani moc neoptimalizuje...

Něco jako je průhlednost bys mohl v CSS u obrázku nastavit pomocí vlastnosti CSS "filter".

To greppi : To jsou lednové statistiky...dnes už jen FF pužívá kolem 30% uživatelů :)

Tvorbou www se zabývám už nějaký pátek a nejjednodušší možnosti, jak ošetřit správné zobrazování v každém prohlížeči, jsou buďto přes použití JavaScriptu, který nadefinuje, co se má zobrazit v IE a co v ostatních prohlížečích (uživatelé IE 7 jsou tak bohužel odepsáni) a nebo přes vložení

<!--[if !IE]> --> text <!-- <![endif]-->

<!--[if IE]> text <!-->

to Sakalik

<!--[if !IE]> --> text <!-- <![endif]-->

<!--[if IE 6]>  <link rel="stylesheet" ....s GIFy....>  <![endif]-->

<!--[if !IE 6]> --> <link rel="stylesheet" ...s PNGy...> <-- <![endif]-->

Napadá mě akorát nějakej hack přes CSS, ale pochybuju, že to vůbec jde... (ale kdyby šlo, byl bych rád :smile2: )

NO ja pouzivam tento javaskript

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])



if ((version >= 5.5) && (document.body.filters)) 

{

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i]

      var imgName = img.src.toUpperCase()

      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

      {

         var imgID = (img.id) ? "id='" + img.id + "' " : ""

         var imgClass = (img.className) ? "class='" + img.className + "' " : ""

         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

         var imgStyle = "display:inline-block;" + img.style.cssText 

         if (img.align == "left") imgStyle = "float:left;" + imgStyle

         if (img.align == "right") imgStyle = "float:right;" + imgStyle

         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

         var strNewHTML = "<span " + imgID + imgClass + imgTitle

         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 

         img.outerHTML = strNewHTML

         i = i-1

      }

   }

}

	<!--[if lt IE 7]>

<script defer type="text/javascript" src="js/png.js"></script>

<![endif]-->

<to Dalaman> Díky
Zkusil jsem tvůj skript v IE6 => selhal
Příčina:
nefunguje záhadně jedna věc: document.body.filters Browser se vytasí s chybovým hlášením:
>>>Uvedená procedura nebyla nalezena <<<
(v IE7 to běží bezchybně)
Myslíte že za to může, že používám standalone verzi IE6, která - protože není instalovaná - nemá plnohodnotné chování ?
Můžete někdo kdo máte STANDALONE toto potvrdit či vyvrátit pls ???

Pak už zbývá jen kolize s nějakým doplňkem (dll knihovnou), chyba v konfiguraci/nastavení nebo poškozená verze (už ani nevím odkud jsem to stáhl)

A nakonec jedna poznámka: tohle neřeší PNG použité jako pozadí => což je většina použitých obrázků. Škoda !!!!!!

>> našel jsem na webu popis této techniky:
Fix PNG transparency issue for IE 5.5 - 6 in HTML/JavaScript Tutorials http://swik.net/SWiK/Dream.In.Code+Programming+Tutorials/Fix+PNG+transparency+issue+for+IE+5.5+-+6+in+HTML%2FJavaScript+Tutorials/bky5j
----------------------------------------------------------------------------
Tak už vím (což bych radši nevěděl) že jsem se standalone verzí vlastně v háji. A o další krůček blíž k tomu se na PNG vy....

Tak už mi IE6 funguje i při používání filtrů.
Náprava: stačilo umístit do složky s IE6 soubory, obsažené po rozbalení instalačky ie60.exe v CABu: IEW2K_3
* dxtmsft.dll (6.00.2900.2180 (xpsp_sp2_rtm.040803-2158))
* dxtrans.dll (6.00.2900.2180 (xpsp_sp2_rtm.040803-2158))

To Petroff : Bože PITLE??? :o) to ani já nedovedu :o)

No já používám tohle... ve vektorovým programu si udělám obrázek, a barvu co chci pryč nechám (bílou, jasně modrou, nebo podobně) a pak v Gimpu tu barvu co chci pryč nasaji a přidám do alfi, kliknu a je fuč a není to ani tak průhledný jako smazaný a zůstane tam pouze to co chci aby bylo vidět.... i když je fakt že to testuji na IE7.... starší už nemám...

To alexsedron :
Grafika není moje parketa, pár dávkových konvertorů mě při převodu png na gif zklamalo (ještě nejlíp to vyšlo v Photoshopu jenže ten nemá dávkovou konverzi). Sice ti vůbec nerozumím, ale pokud mi pošleš (třeba v příspěvku) nějaký svůj výtvor - já to testnu v ie6 a jestli to bude nezávadné tak se vrhnu do studia.

Zatím mám dilema:
-buď dávat PNG obrázky (s informační hodnotou) do IMG, aby to v IE6 script čitelně vykreslil a riskovat tím ošklivost (vypnuté scriptování)
-nebo pomocí background-img do stylů pro IE6 dát hůře čitelný gif (ikdyž má zapnuté scriptování - nelze využít) a nonIE6 mají ve stylech své PNG

Napadl mě způsob, který omezí nedokonalost pouze na IE6 s vypnutým JS - ještě jsem ho nezkoušel:

-je třeba script: osetritpng.js
-každého zobrazení se účastní 3 obrázky:
[společný] sklo.gif - prázdný průhledný GIF (=průhled na pozadí)
[N/1] xxxx.png - původní obrázek
[N/2] xxxx.gif - náhrada (pro případ že mám IE6 a vypnuté skriptování)

[HTML]

<img id="menu" src="sklo.gif" alt="obr.menu" onLoad="this.src='xxxx.png'"/>

[CSS]

         #menu { background: url(xxxx.png) }   /*[kromě IE6]*/

* html #menu { background: url(xxxx.gif) }  /*[pro IE6]*/

To Petroff : No na stránkách www.ditom.cz mám u položek průhledný pozadí a to je tvoření obrázkem v png.
Hledal jsem v příručkách a fakt jediné co je na průhlednost nějakého prvku je background-color: transparent;

Tak nevím jestli takhle spočívala otázka... u toho co jsem psal výše jsem měl namysli, postup pro odstranění míst obrázku, která mají být průhledná.... ale to asi nebylo jádro pudla :o)

To alexsedron : Jádro pudla je: mám kolekci (hotových, připravených k použití) PNG obrázků - potřebuji náhradní kolekci, která se zobrazí v ie6
PNG průhlednost je využita k:
(1) obrázek není obdélník =zakulacené rohy (případný stín.obrys vně okrajů v průhledné části nebo dovnitř(plastičnost) >>OŽELÍM)
Konverze na gif ne moc dobrá (moc odstínů; místo plynulého ztmavení pozadí je pruhovaný)
S TÍM BYCH SE SNAD JEŠTĚ VYPOŘÁDAL (dám barvu pozadí stránky a VYROBÍM formát JPG)
ale
(2) obrázk.texty ležící na obrázk.podkladu (podklad není stejnobarevný!!) <= řešeno jedinou průhlednou vrstvou (čitelnost ~ antialising)
S TÍM SI NEVÍM RADY

Vyřešeno obojí:
1. - jak zobrazení průhledných <img>PNG nad jiným prvkem s PNG
2.- tak realizace <div>ů s background-image: průhl.PNG

1. Obrázek se vloží do <div>u s rozměry obrázku:

  <div id="headmenu"> <div><img src="../images/menu.png" /></div></div>

#headmenu div {

height:14px;

width:36px;

}

* html #headmenu img { visibility:hidden }

* html #headmenu div {

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/menu.png', sizingMethod='scale');

}

<div id="headmenu">Mám png pozadí/div>

html>body #headmenu {

background: url(../images/menu.png) no-repeat;

height:14px;

width:36px;

}

* html #headmenu {

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/menu.png', sizingMethod='scale');

height:14px;

width:36px;

}