 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Froschkoenig84
Threadersteller
Dabei seit: 21.02.2007
Ort: München
Alter: 40
Geschlecht: 
|
Verfasst Mi 12.09.2007 19:06
Titel [CSS] AlphaImageLoader + Background-Positionierung |
  |
|
Servus,
hat jemand von euch bereits eine Lösung zu dem Problem gefunden, vor dem man steht, wenn man mit dem AlphaImageLoader von Microsoft ein PNG-Hintergund hat und bei diesem nicht die linke-obere Ecke, sondern einen alternativen Nullpunkt setzen möchte?
Also ich habe eine sehr, sehr lange Grafik, die ich nicht per PhotoShop zerschneiden möchte. - Diese Grafik ist 860px bereit und 4800px hoch. Sie besteht eigentlich nur aus einem weißgefüllten Rahmen mit abgerundeten Ecken, wobei dieser Rahmen nach außen hin glüht, und drumherum nur Tranzparenz.
Ich möchte nun einen Kasten mit variabler Höhe daraus erstellen, per CSS grundsätzlich kein Problem...
| Code: | <div style="width:860px; height:216px; background-image:url('images/xxgschaa.png'); background-position:0px +0px;"></div>
<div style="width:860px; height:400px; background-image:url('images/xxgschaa.png'); background-position:0px -216px;"></div>
<div style="width:860px; height:57px; background-image:url('images/xxgschaa.png'); background-position:0px +57px;"></div> |
Generell war meine Zweite Überlegung auch nicht so dumm, aber, durch das overflow:hidden, wird natürlich auch der Text abgeschnitten, sollte er mal länger als 400px sein...
| Code: | <div style="height:216px; overflow:hidden;">
<div style="width:860px; height:4800px; margin-top:0px; padding-top:0px; background-image:url('images/xxgschaa.png'); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='images/xxgschaa.png');">
</div>
</div>
<div style="height:400px; overflow:hidden;">
<div style="width:860px; height:4800px; margin-top:-50px; padding-top:50px; background-image:url('images/xxgschaa.png'); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='images/xxgschaa.png');">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
</div>
<div style="height:58px; overflow:hidden;">
<div style="width:860px; height:4800px; margin-top:-4743px; background-image:url('images/xxgschaa.png'); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='images/xxgschaa.png');">
</div>
</div> |
Ich schneide also aus ein und der selben Grafik immer nur den entsprechend benötigten Teil heraus, wobei oben und unten die Größe der Ecken-Rundungen + Größe des Schattens/Glühens beträgt, aber der mittlere Bereich zeigt einfach den Bereich, von dem aus man die Rundung nicht mehr sieht bis ... na ja theoretisch müsste ich eine max-height:4743px einsetzen, denn dann folgen die unteren Eckrundungen.
Mein Problem ist eigentlich nur wieder der IE, der diese verf***kten PNG-Hintergrund-Bilder nicht auf die Reihe bekommt.
Wenn ihr einen "neuen" PNG-Behavior kennt, der bereits CSS-Hintergrund-PNGs korrekt mit AlphaMerging darstellt, sofort posten!
Ich brauche also entweder eine Lösung, um beim AlphaImageLoader eine Background-Positionierung vornehmen zu können, .... oder einen etwas besseren PNG-Behavior, der auch CSS-AlphaPNG-Hintergünde darstellt.
HOPE U CAN HELP
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 12.09.2007 20:41
Titel
|
|
|
|
|
| |
 |
|
|
Anzeige
|
|
|
Froschkoenig84
Threadersteller
Dabei seit: 21.02.2007
Ort: München
Alter: 40
Geschlecht:
|
Verfasst Fr 14.09.2007 10:37
Titel
|
|
|
Keine Ahnung, was du mir damit sagen willst. - Wenn ich etwas brauchbares gefunden hätte, hätte ich wohl kaum nochmal nachgefragt. - Nur ihr zerschneidet mit die Grafiken zu viel. Ich bin eigentlich gelernter Programmierer und da ist es üblich, nur eine große Grafik zu verwenden, die man dann in Laufzeit per X/Y-Position zerschneidet. - Macht ja auch Sinn, da die Ladezeiten sogar im Web deutlich kürzer sind. - Und man hat nur eine einzige Grafikdatei für sämtliche Schatten oder entsprechende Effekte.
Mit background-position klappt das auch in der Regel spitze, nur eben nicht bei Alpha+IE6. - Und wie ich so lese, kennen sich die meisten noch weniger mit dem AlphaImageLoader-Filter von MS aus, als ich es tue.
Na ja, egal, ich hab mir mit C++ jetzt einen eigenen Behavior programmiert, der als Servlet fungiert und ähnlich wie der normale PNG-Behavior einfach per auf eine C++-Variante von ImageStick zurückgreift, um die "z-Ebenen" zu einer transparentfreien PNG-Grafik verschmilzt.
Dennoch danke.
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 14.09.2007 10:49
Titel
|
|
|
Damit wollte ich dich auf die Suche verweisen welche zu dem Thema einige
Beiträge liefert in denen gute Lösungen erwähnt wurden. Aber da du ja schon
selbst darauf gekommen bist..
Edit: sorry, du hast vollkommen recht, mißverständnis..
Zuletzt bearbeitet von m am Fr 14.09.2007 11:36, insgesamt 1-mal bearbeitet
|
|
| |
|
|
sidisinsane
Dabei seit: 30.01.2006
Ort: Hamburg
Alter: 52
Geschlecht:
|
Verfasst Fr 14.09.2007 11:25
Titel
|
|
|
Technisch gesehen ist Dein Hintergrundbild wohl nach Anwendung des Filters kein Hintergrundbild mehr. Somit haben sämtliche "Background Properties" keine Auswirkung mehr. Also weder background-position, noch background-repeat. Ein Workaround müsste also so entworfen werden als wäre Dein Hintergrund ein gewöhnliches "img".
Sorry, für meine umständliche Ausdrucksweise aber mein Sprachzentrum tickt heute nicht ganz richtig.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
AlphaImageLoader / CSS Navi mit Rollover
AlphaImageLoader greift nicht
Div Positionierung
IE8 und die Positionierung
[CSS] Positionierung
CSS Positionierung ...
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
