PNG og gennemsigtigt

Et lignende problem der måske er relateret, er at de fleste browsere viser forskel på en farve i et billede og en farve i et HTML-element.

Hvis du tager farven #E01B4C og giver din body den som background, og derefter laver et 100x100px billede i Photoshop som du fylder med farven, og lægger billedet ind som <img>, så vil du kunne se en forskel på billedet og baggrundens nuance -- på trods af at det er samme farve.

Jeg skal ikke kunne sige om det er det samme problem der gør sig gældende her, men typisk burde transperans ikke være påvirket.

Så ligger problemet ikke i selve din png-fil men i IE 7/8, som kan have nogle problemer med at vise billeder med alpha-channels rigtigt.

Det lader til at andre har haft held med dette stykke CSS til at fixe problemet. (Du skal så selvfølgelig lige rette i css/html så det hænger sammen)

 img {
     background: transparent;
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */
     zoom: 1;
 
 }

Som @Per allerede har nævnt er dit problem sandsynligvis at kvaliteten af billedet bliver reduceret når du gemmer det som .png, og derved opnår en forskel mht. baggrundsfarve.

Hej Ken,

Det burde der ikke være noget problem i. Gemmer du som PNG-24? I Photoshop skal du oprette det som et transparent billede, og når du gemmer bruger du "Gem til web" funktionen.

Derudover skal du være opmærksom på at ældre browsers ikke understøtter gennemsigtighed i billeder (IE7, IE6 osv).

Jeg gør præcis som du anbefaler.
Dvs. "Save for web... " klikker transparent til, og gemmer som PNG-24.

Benytter Chrome 10 til at teste med.


Jeg har pt. ikke noget demo jeg kan vise dig. Men kan arbejde på det i aften.

I praksis er det en knap jeg vil have oven på baggrundsbilledet.
Se : http://nailmania.dk

Billedet i toppen : "Tilmeld mig nu" knappen skal være aktiv, og er derfor lavet som selvstændigt billede.

Pt har jeg løst det ved at ikke have have transparente kanter på knappen

Hey. Lyder underligt. Kunne godt tænke mig at se et screenshot for at se om du gør det korrekt.
Husk at "hide" baggrunds-laget på dit billede.

Hvad mener du med at hide baggryundslaget?

Mener du i Photoshop?

Ja, det er det han mener (du kan også bare slette baggrundslayer'et, hvis ikke du har gjort det i forvejen) - for at baggrunden kan blive gennemsigtig er det nødvendigt at den også er det

Når du vælger at gemme som PNG_24, husker du så at checke af, at det også skal være en gennemsigtig (transperant) png?

Jo baggrundslaget er ikke gennemsigtigt, så hvis du vil have et billede gennemsigtigt hider man baggrunden!

På det her billede er det det nederste lag:
http://www.buildtutorial.com/wp-content/uploads/2010/12/new-layer3-144x300.jpg
Tryk på øget, og du får gennemsigtigt billede

jaja, baggrunden er skal transparent. (Grå firkanter symboliserer det i PS).
og ja jeg krydser checkboksen af før jeg gemmer. Der er tydelig forskel i preview billedet.
Jeg tror ikke det er der fejlen ligger.