So praktisch wie der CSS Code „opacity:0.5;“ auch ist, Mac-Nutzer halten davon nichts. Na gut, das ist etwas verallgemeinert, aber welche Probleme auftauchen und wie man sie umschifft, erfährst du heute.

„opacity:X;“ soll eigentlich das Bild „transparenter“ machen, wobei 0.1 für 10% Sichtbarkeit steht. Doch so schnell man den Code auch nutzt, er ist nicht optimal. Ich habe mich auch dazu verleiten lassen, es in meinem Channel Besserwisser zu nutzen und schon nach einigen Tagen beschwerten sich Nutzer, dass sie keine Buttons sehen. Wie sich herausstellte, haben sie alle einen Mac.

div[data-actions="gamestart"]{
background-image:url(start.png);
background-repeat:no-repeat;
width:    165px;
height:   60px;
position: absolute;
top:      100px;
opacity:  0.8;
}

div[data-actions="gamestart"]:Hover{
opacity:1;
}

Damit es nun bei jeden Nutzer funktioniert, müssen wir etwas mit Photoshop-Transparenzen arbeiten. Dabei können Gimp und eine Vielzahl anderer Programme das genauso. Dafür nehmen wir einfach von den Button die Deckkraft weg. Das schaut dann so aus:

Bedenken wir nun, dass JPG keine Transparenz darstellen kann, nehmen wir das Bild mit 80% Deckkraft und speichern es als StartNoHover.png. PNG kann die Transparenz darstellen, ideal für uns. Dafür entfernen wir einfach opacity: 0.8;(Zeile 8 im oberen Beispielcode) aus unserem CSS-Block und schon gehört das Problem der Vergangenheit an.

div[data-actions="gamestart"]{
background-image:url(start.png);
background-repeat:no-repeat;
width:    165px;
height:   60px;
position: absolute;
top:      100px;
}

div[data-actions="gamestart"]:Hover{
opacity:1;
}

Nun wird das Bild ohne Hover mit 80% Transparenz angezeigt und sobald die Maus über das Bild streicht (Hover), wird es mit 100% Deckkraft angezeigt. Nun haben wir den selben schönen Hover Effekt wie mit „opacity“, nur dass Mac-User nun kein Anzeigefehler mehr haben und das Spiel voll und ganz genießen können.