Delvis genomskinliga bilder på pc

Tråden skapades och har fått 15 svar. Det senaste inlägget skrevs .
1
  • Oregistrerad
  • 2005-06-05 18:25

Jag bygger en hemsida där två bilder ligger mellan bakgrunden och tabellen med innehållet, placerade med css och z-index. Bilderna är två stämplar och ska till del vara genomskinliga, det funkar fint på alla mina browsers på min mac, men inte på kundens pc, där ligger dom på vit platta.

Jag navände png-8, men har nu testat png-24 och gif, men det funkar dåligt. Jag får en vit kant runt som är ful. Finns det något rätt sätt, eller ska jag plocka bort alla vita färger när jag sparar bilderna för webb i PS och hoppas på det bästa?

Sidan som den ser ut nu (jag kommer pilla med den under kvällen):
http://www.trevligresa.se/johanwellton/

/Pontus

Tyvärr så är png-stödet i IE kasst så vitt jag vet, vilket gör att du får problemen du nämner. Lösningen är antingen att du skiter i css-lösningen och hittar på något annat sätt att få in stämplarna, eller så gör ett script som känner av om besökarna använder IE och slänger upp en sida som rekommenderar dem att köra Firefox eller Safari.

  • Medlem
  • Karlstad
  • 2005-06-05 18:52

Jodå, Explorer stöder png, både 8-bits och 24-bits, men det är bildformatets s.k. "alpha-channel" som Microsoft aldrig brytt sig om. Därmed kan man sällan utnyttja png24:s fantastiska fördel, att göra delar av bilder helt transparenta eller "dimmade" (translucent). En hel värld av web designers HATAR Microsoft för deras totala nonchalans över detta, eftersom formatet funnits 10-12 år eller nåt, och att alla (?) andra webbläsare stöder formatet och dess alpha-channel.

Man får helt enkelt lösa det på annat sätt....

Ursprungligen av Danne V:

Jodå, Explorer stöder png, både 8-bits och 24-bits, men det är bildformatets s.k. "alpha-channel" som Microsoft aldrig brytt sig om. Därmed kan man sällan utnyttja png24:s fantastiska fördel, att göra delar av bilder helt transparenta eller "dimmade" (translucent). En hel värld av web designers HATAR Microsoft för deras totala nonchalans över detta, eftersom formatet funnits 10-12 år eller nåt, och att alla (?) andra webbläsare stöder formatet och dess alpha-channel.

Man får helt enkelt lösa det på annat sätt....

Det var ju det jag sa, fast jag komprimerade det till ett ord: kasst, inte att det var obefintligt.

  • Oregistrerad
  • 2005-06-05 19:19

Det går att fixa. OBS png behöver var 24-bits vilket ger riktig genomskinlighet.
Två möjligheter, denna som bygger på att IE på pc och de andra nätbläddrarna behandlar vissa stylsheet grejor olika eller gammal hederlig browsercheck och två olika stylsheet:

-----------kod börjar -----------
<style>
.backgroundMenuBlue {
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='images/5C7E96_50.png');
}

.backgroundMenuBlue[class] {
/* IE ignores styles with [attributes], so it will skip the following. */
background-image:url(images/5C7E96_50.png);
}
</style>

<div class="backgroundMenuBlue">
<a href="">Meny länk 1</a><br>
<a href="">Meny länk 2</a>
</div>

---------slut kod-------

sizingMethod=image ger att bakgrundsbilden blir så stor ursprungsbilden är
sizingMethod=scale ger att bilden skalar upp seg att passa ytan
5C7E96_50.png är en png bild med 50 % genomskinlighet-

det går alltså att gör menyer med "äkta" skuggor

test www.sodertornsfk.com det är några grejer med menyn att fixa för safari, firefox.
Menytexten "Meny" lägger sig över meny men det har jag inte fixat ännu.

De möjligheter som attributet opacity etc. lite olika i beroend på browser, har tyvärr egenskapen att element inuti huvudelementet ärver genomskinlighet.

Lycka till.

  • Oregistrerad
  • 2005-06-05 18:52

Kan du komma på en annan lösning för komma när resultatet? Klart att jag vill att dom ska byta till mac, men kunden ska bli glad också...

Jag har inte lyckats göra nån snygg gif, annars är väl det det mest stabila för genomskinlighet?

  • Medlem
  • Karlstad
  • 2005-06-05 18:56
Ursprungligen av pontusuggla:

Kan du komma på en annan lösning för komma när resultatet? Klart att jag vill att dom ska byta till mac, men kunden ska bli glad också...

Jag har inte lyckats göra nån snygg gif, annars är väl det det mest stabila för genomskinlighet?

Det handlar inte om Mac eller Win, utan BARA om Internet Explorer, oavsett vilket operativsystem man har. Och det handlar ju INTE om din kund, eftersom över 90% av alla sajtens besökare troligen kommeer dit med Explorer. Dom ska ju kunna se sajten som tänkt också. Om du nu inte lyckas få dom att byta läsare, alltså....

gif-formatet funkar i alla läsare, men ger inte procentuell transparens, (translucency), utan antingen är en pixel HELT synlig, eller inte synlig alls.

  • Oregistrerad
  • 2005-06-05 18:58

Det fula är att det funkar fint på min IE på min mac.

Men det finns en hel del skrivet om ämnet hittar jag nu, så jag testar lite innan jag skriker sorry till honom.

  • Medlem
  • Karlstad
  • 2005-06-05 19:22
Ursprungligen av pontusuggla:

Det fula är att det funkar fint på min IE på min mac.

Fel av mig - rätt av dig. Det är "bara" IE/Win som inte stöder alpha-kanalen.

Men jag råder dig att fundera ut en lösning utan extra hacks i koden - speciellt som det verkar som du ska ha png:n som en bakgrundsbild (eller fattade jag fel?). Kan du t.ex. inte göra särskilda bakgrundsbilder till de sidor där du ska ha detta, och lägga inte det där lite halvtransparent redan i den?

  • Oregistrerad
  • 2005-06-05 19:05

Jag har helt valt att skita i denna typ av bilder och positionering med css för jag har sett det kajka så många gånger, men här var jag tvungen eftersom jag fick designen av honom.

Hur skulle ni och dom andra tusen programmerarna göra?

  • Oregistrerad
  • 2005-06-05 19:25

Hur tillämpar jag detta på min sida?

http://www.trevligresa.se/johanwellton/

  • Medlem
  • Karlstad
  • 2005-06-05 20:26

Som jag ser det, så har du ett antal png (stampel.png, 46nyhetsbrev.png, osv) som du bara sparar som transparenta giffar istället, med en s.k. "matte" (dvs en liten tunn "gräns" mellan den transparenta och icke-transparenat ytan i bilden) av t.ex. #dec698 eller annan färg som du har i bakgrundsbilden. Det ska funka utan att någon ser någon som helst skillnad.

Du kan ju kolla med exemplet jag gjorde av "stampel.png": http://www.proformica.com/stampel.gif och lägga in i ditt dokument för test.

Förresten, om jag får slå ett slag för 99macs systerforum (som tyvärr inte är så aktivt...) 99web.se: Posta gärna frågor om webben där istället för här..
http://99web.se/index.php?

  • Oregistrerad
  • 2005-06-05 20:30

Jag har precis testat detta och blev glatt överraskad. Så får det bli.

Hur ska vi får folk att sluta använda IE?

  • Medlem
  • Karlstad
  • 2005-06-05 20:35
Ursprungligen av pontusuggla:

Jag har precis testat detta och blev glatt överraskad. Så får det bli.

Klokt.

Ursprungligen av pontusuggla:

Hur ska vi får folk att sluta använda IE?

Det fixar vi samma dag vi grejar så folk går över till radions P1 istället för P4, kollar in Agenda istället för Big Brother och läser en bok istället för att glo på schlagerfinaler. Piece of cake....not....

  • Oregistrerad
  • 2005-06-05 23:19

Nu har kunden sett gifen och han är glad.

Nu är det 19 timmar kvar, jag kommer inte kunna sova.

  • Medlem
  • Karlstad
  • 2005-06-05 23:28
Ursprungligen av pontusuggla:

Nu har kunden sett gifen och han är glad.

Nu är det 19 timmar kvar, jag kommer inte kunna sova.

Inte vet jag vad som händer om 19 timmar mer än att Bolibompa börjar. Men lycka till, vad det än är.

1
Bevaka tråden