PDA

View Full Version : [PS & Web] Transparantie


Potenza
06-11-2007, 20:42
Een nieuw probleem dat dringend een oplossing behoeft, kameraden!

http://img.photobucket.com/albums/v417/-Potenza-/GJWelkompreview.jpg

Edit: Zie twee berichten verder :-)

Kolb
06-11-2007, 20:48
Misschien met wat Javascript werken ofzo.

logion
06-11-2007, 23:30
Jammer genoeg is de probleemstelling niet 100% correct.

De situatie :
De afbeelding die Potenza post wordt de achtergrond van de content.
Een achtergrond van een div moet in CSS gedefinieerd worden en wordt al dan niet herhaald. Deze achtergrond in kwestie wordt niet herhaald maar er zijn andere pagina's met andere achtergronden die wel verticaal herhaald worden.

Nu is deze achtergrond een PNG file, waarom? Omdat PNG meer kleuren heeft dan GIF's en betere transparantie.(de precieze details moet ik jullie verschuldigd blijven)
Het probleem : IE6 ondersteunt basic geen transparantie van PNG's.
Hier bestaan hacks voor die gebruik maken van de zogenaamde (alfaopacity?)filter. Deze hacks worden geschreven in JS en kunnen aan PNG's toch transparantie toevoegen.
MAAR dit werkt niet voor achtergronden van elementen die bestaan uit een PNG.

DUS weet er iemand een (JS) hack voor IE6 die toch transparantie toevoegt aan PNG's die als achtergrond gedefinieerd worden in CSS.(volgens mij bestaan zo'n hacks niet)

Een alternatieve oplossing, zonder gebruik te maken van JS hacks voor PNG achtergronden(als ze al zouden bestaan), bestaat er in het middenstuk te slicen. Slicen zodanig dat je zoiets bekomt:
http://img216.imageshack.us/img216/9563/gjwelkompreviewld0.jpg
Het bovenstuk wordt opgeslagen als PNG en als een img toegevoegd in de HTML, deze zal dus transparant worden dmv. de hack in IE6.
Idem dito voor het onderste stuk.
Het middenstuk bestaat uit 3 kolommen:
in de eerste & de derde kolom wordt een GIF verticaal herhaald.(via CSS) Deze zal dus transparant zijn in IE6.
De 2e kolom bevat een jpg die al dan niet verticaal herhaald wordt, in dit voorbeeld wordt er niet herhaald. Bij de pagina's met het gordijnen motief wordt de JPG wel verticaal herhaald.
Nu kiezen we deze jpg natuurlijk zo dat er geen nood is aan transparantie. Zie de verticale lijnen op de figuur.

Veel uitleg om een alternatieve oplossing te vinden, die volgens mij de beste is.
TENZIJ :
Weet er iemand een hack voor IE6 waardoor PNG's die worden gebruikt als achtergrond via CSS toch transparant worden?
Indien neen, dan zou ik aanraden om mijn oplossing van hierboven te gebruiken.
Naar mijn mening is de topic titel niet helemaal correct, want het probleem situeert zich niet bij photoshop maar wel bij IE6 die geen transparantie van PNG's ondersteunt.(een groot hekel punt, zo niet het grootste, aan IE6)

Potenza
07-11-2007, 00:02
Eh, wel, wat hij dus zij. Dat krijg je dus als je vragen stelt terwijl je maar de helft van het probleem kent. Excuus voor de verwarring, startpost aangepast.

Zwoep
07-11-2007, 12:26
Try this one: http://homepage.ntlworld.com/bobosola/

Cakeman
07-11-2007, 12:31
Die van Zwoep werkt ook niet op background-images. Wat je wel kan doen, is gewoon een de div met je tekst absoluut boven de image positioneren.

In dit geval zal dat werken. Wanneer het op een repeating background gaat jammer genoeg niet meer.

frenzal
07-11-2007, 13:00
geloof dat dit werkt met transparent pngs:
http://dean.edwards.name/IE7/

denk (maar ben niet 100% zeker dus lees het na) dat je in uw css al uw background images zo moet noemen: background-xxx.png

het werkt niet met tiling backgrounds maar dat heb ik nog nooit werkend gezien in ie6..

ik zie trouwens wel niet waarom je transparent pngs nodig hebt in uw voorbeeld?

Wolf
09-11-2007, 08:48
Zie het ook niet in. Opacity in PS betekent niet dat je transparantie nodig hebt op het web.

voor <img> tags: iepngfix.htc
voor background images: class="png" en in de ie6 conditional comments: .png {
filter:(en de hele filter); }

dan goed opletten dat je paden kloppen.

logion
09-11-2007, 15:24
Met Frenzal zijn oplossing, die kennelijk IE7 gedoopt werd(verwarring met de browser),zijn transparante png achtergronden ook echt transparant in IE6, waar voor dank.
Maar helaas, zoals hij ook al zei, werkt dit niet meer als je een transparante achtergrond begint te herhalen.

@frenzal & Wolf:
http://www.temp.greenjacket.be/nieuws dit is de pagina in kwestie, we gebruiken transparant png's omdat:
1) we willen dat de body background doorloopt waar de achtergrond v/d content transparant is
2) we gebruiken png's ipv. gifs omdat deze meer kleuren ondersteunen.
Allemaal bedankt voor de suggesties maar ik vrees dat slicen in verschillende kolommen de enige oplossing is.

frenzal
09-11-2007, 15:55
het zou perfect gaan met gifs, ok transparantheid van pngs is wel beter maar je achtergrond is niet zo contrast rijk dus je zou het nooit merken als het een gif is

als je toch overtuigd bent dat ge png nodig hebt hiervoor dan kun je niet herhalende transparent pngs gebruiken in header en footer van tabel gebruiken (moeten niet eens bg images zijn) en de content kan transparente gif zijn want het is toch recht en zit je zoiezo niet met karteling

maar moest ik jou zijn zou ik gewoon gif gebruiken

Potenza
09-11-2007, 19:21
Ha! Ik ben een kieken, laat dat gezegd zijnde.

Ik had van in't begin alles omgezet naar gif toen ik er achterkwam dat IE6 png niet ondersteunde - maar ik verloor effectief veel kleuren. Toen vond ik dat al vreemd: eindelijk weet ik waarom. Stond ingesteld op 'For web' - maar da's 214 kleuren ipv 256. Geen seconde op gelet eigenlijk.

Kieken dat ik ben. Excuus, topic solved.

frenzal
09-11-2007, 21:56
for web zal misschien web safe kleurenpallette gebruiken dan, want met uw design zou je in principe zelfs toekomen met 128 of minder

Potenza
09-11-2007, 23:56
Mneeh, op 217 kleuren kreeg ik toch al weinig charmante resultaten hoor. De figuren werden redelijk sci-fi hoor. Maar bon, met gifs werk(te) ik sowieso niet al te vaak, en het probleem is opgelost. Bedankt allemaal.

Wolf
10-11-2007, 13:10
Dat komt doordat web safe 216 vaste kleuren zijn, maar zonder web safe neemt hij de best mogelijke kleuren voor het desbetreffende beeld.