Opera & Hintergrundgrafik & Zoom

[FrankieB]

Hallo,

bekanntlich "zoomt" der Opera (bei mir 7.22) auch die Hintergrundgrafiken mit.

Eigentlich halte ich dieses Feature für sehr gut.

Jetzt habe ich aber ein Problem damit und weiß nicht wie ich es lösen könnte, sofern es überhaupt eine Lösung gibt:

Also, ich habe einen Bereich mit einem "halbtransparenten" Hintergrund. Es ist ein Schachbrett-Gif, abwechseld Farbe und transparent, 4x4 Pixel gross. Wenn ich nun bei Opera den Zoom verändere dann wird es (logischerweise) verzerrt dargestellt und damit unbrauchbar.

Kennt wer eine Workaround um das automatische Mitzoomen des Hintergrunds bei Opera mit CSS zu verhindern?

Danke & Grüsse

Frankie

[Maxx]

Hallo Frankie,

Also, ich habe einen Bereich mit einem "halbtransparenten" Hintergrund. Es ist ein Schachbrett-Gif, abwechseld Farbe und transparent, 4x4 Pixel gross. Wenn ich nun bei Opera den Zoom verändere dann wird es (logischerweise) verzerrt dargestellt und damit unbrauchbar.

Kennt wer eine Workaround um das automatische Mitzoomen des Hintergrunds bei Opera mit CSS zu verhindern?

ich glaube nicht das man den Zoom des Hintergrunds beim Opera verhindern kann.

Aber warum verwendest du nicht eine richtige Transparenz? Diese Schachbrett-Gifs sehen auch ohne Zoom schon sch***e aus.
Zum Beispiel ein wunderschönes png mit alpha-Transparenz. Für veraltete Browser wie etwa den IE6 gibt es Workarounds.

Grüße,

Jochen

[FrankieB]

Hallo Jochen,

erstmal danke für deine Antwort.

ich glaube nicht das man den Zoom des Hintergrunds beim Opera verhindern kann.

schade ;-(

Aber warum verwendest du nicht eine richtige Transparenz? Diese Schachbrett-Gifs sehen auch ohne Zoom schon sch***e aus.

Naja, im Mozilla und im IE sah's eigentlich ganz gut aus, zumindest bei mir.

Zum Beispiel ein wunderschönes png mit alpha-Transparenz. Für veraltete Browser wie etwa den IE6 gibt es Workarounds.

Grafiken mit alpha-Transparenz habe ich noch nie gemacht, was muss man beim Erstellen besonders beachten und wie geht der Workaround für den IE?

Grüsse
Frankie

[Maxx]

Hi Frankie,

Zum Beispiel ein wunderschönes png mit alpha-Transparenz. Für veraltete Browser wie etwa den IE6 gibt es Workarounds.

Grafiken mit alpha-Transparenz habe ich noch nie gemacht, was muss man beim Erstellen besonders beachten

Je nach verwendetem Grafikprogramm.
In Paintshop:

1. Eine Grafik in der gewünschten Größe mit der gewünschten Hintergrundfarbe.
2. Ebene-Eigenschaften-Deckfähigkeit
3. Den gewünschten Transparenzgrad einstellen
4. als png speichern, fertig

und wie geht der Workaround für den IE?

"gute" Browser
background-image:url(dein.png);

"böse" Browser
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dein.png',sizingMethod='scale');

Das IE-CSS z.B. über Condition Comments <!--[if gte IE 5.5]> eingebunden. Für den IE 5 und früher gibt es keinen Workaround.

Und wenn du alles richtig gemacht hast, sollte es etwa so aussehen:
http://www.electric-lemon.de

Grüße,

Jochen

[FrankieB]

Hallo Jochen,

nochmals besten Dank für deine Hilfe.

Mittlerweile habe ich das allermeiste schon hinbekommen, war halt absolutes Neuland für mich.

Evtl. interessante Seiten zu dem Thema habe ich (ausser deiner) auch noch gefunden:

http://www.koivi.com/ie-png-transparency/ [1]
http://www.alistapart.com/articles/cssdrop2/ [2]

Je nach verwendetem Grafikprogramm.
In Paintshop:

1. Eine Grafik in der gewünschten Größe mit der gewünschten Hintergrundfarbe.
2. Ebene-Eigenschaften-Deckfähigkeit
3. Den gewünschten Transparenzgrad einstellen
4. als png speichern, fertig

Ja. wenn man weiss wie, dann ist es wirklich simpel.

Das IE-CSS z.B. über Condition Comments <!--[if gte IE 5.5]> eingebunden. Für den IE 5 und früher gibt es keinen Workaround.

In einem von den mir genannten links [2] wird <!--[if gte ie 5.5000]>
verwendet, weisst Du, ob das notwendig ist, ich meine mit dem 5.0000?

Und wenn du alles richtig gemacht hast, sollte es etwa so aussehen:
http://www.electric-lemon.de

Schöne Seite, gefällt mir :-)

Wenns interessiert:

In Anlehnung an ein Script auf [1] habe ich eine einfaches PHP-Script geschrieben, welches mir bei Bedarf den Filter für IE anwendet (den kompletten Output zu Parsen wie im Orginalscript vorgeschlagen halte ich für übertrieben)

Grüsse
Frankie

Aufruf mit z.B.:
<?php
echo PngImagesAlphaFilterIE ("images/test.png","Alternativtext","Titeltext");
?>

Funktion:
<?php

function PngImagesAlphaFilterIE($img, $alt_txt, $title_txt){

// Explorer 5+
 if (@GetImageSize($img)){
  $img_size = GetImageSize($img);
 } else {
  return "Datei nicht gefunden oder kein Bildformat.";
 }

$msie='/msie\s([5-9]).?[0-9]*.*(win)/i';

if( !isset($_SERVER['HTTP_USER_AGENT']) OR
   !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) OR
   preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT'])) {

$img_new = "<img src="".$img."" width="".$img_size[0]."" height="".$img_size[1]."" alt="".$alt_txt."" title="".$title_txt."">";

} else {

$img_new = "<img src="images/spacer.png" width="".$img_size[0]."" height="".$img_size[1]."" alt="".$alt_txt."" title="".$title_txt."" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='".$img."', sizingMethod='scale');">";

}

// nur zur Info
 $img_new .= "<br><small>".$msie."<br>".$_SERVER['HTTP_USER_AGENT']."</small>";

return $img_new;

}
?>