[CSS] Transparentes PNG im IE <= 6.0

[dummix]

Tag Leute,
ich suche schon seit Tagen wie ein Verrückter nach möglichen Lösungsansätzen für mein Problem, und zwar geht es - wie der Titel schon sagt - um die korrekte Darstellung von Alpha transparenten PNG's im IE 6 und abwärts. Jedoch sollen die PNG's als Hintergrundgrafiken (CSS -> background) eingebaut werden und sie müssen sich wiederholen (CSS -> repeat). Das ist der Haken an der Geschichte: Es gibt viele Versuche, PNG's richtig darzustellen (z.B. Dean Edwards' IE7 JS-Script, Microsofts Filter oder PNG Behavior), jedoch funktionieren diese nicht korrekt in meinem Fall.

Was ich also brauche, ist eine Lösung für folgendes Problem:

1. korrekte Darstellung Alpha transparenter PNG's im IE <= 6
2. Einbindung der PNG'S via CSS (background)
3. das eingebundene background-image muss wiederholbar sein (repeat)

Die Kriterien 1 und 2 sind durch Dean Edwards geniale Script-Sammlung machbar, jedoch mangelt es an der korrekten Umsetzung der repeat-Eigenschaft für das transparente Hintergrundbild.
Ich hoffe, dafür lässt sich etwas gescheites finden. Ich bin für jeden erdenklichen Lösungsansatz dankbar!

MfG, dummix

 

[Zweipunktnull]

Hm... also ich hab ma was ähnliches versucht und dann aber irgendwann aufgegeben...
meines wissens gibts da keine lösung, aber ich bin mir dessen nicht 100% sicher.
kannst du nicht vllt einfach ein gif verwenden?

 

[dummix]

GIF bietet mit seinen 256 darstellbaren Farben leider zu wenig zur Verfügung, außerdem bietet das Format keine Alphatransparenz - leider eben nur Farbe oder keine Farbe.

Mein konkretes Problem: Ich habe eine sich wiederholende Holztextur als allgemeinen Hintergrund des body-Elements und nun soll ein zentrierter div-Container einen Schatten haben. Da der div-Container, abhängig von der Fensterbreite, jedoch an verschiedenen horizontalen Positionen sein kann, muss der Schatten als halbtransparente Schicht über der Holztextur liegen.

 

[Cobinja]

Guckst du hier, findest du was:
http://homepage.ntlworld.com/bobosola/

 

[Yo Mr. White]

Hi,

Ich habe es auch aufgegeben transparente PNG zu benutzen. ABER ich habe die Transparenz gefaked. siehe hier (schwarz-gelb Boblitz). Vielleicht hilft dir der Ansatz weiter.

EDIT: hier das richtige Beispiel
richtige Transparenz
simulierte Transparenz


MfG

 

[Zweipunktnull]

Wenn du nur einen Schatten willst, also im Prinzip ein halbtransparentes Block-Element mit schwarzer Hintergrundfarbe, kann kannst du doch einfach CSS verwenden.

so in der richtung, müsste auch mit jedem browser funktionieren...

div.shadow {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

 

[Yo Mr. White]

@Computer Freak
Dein CSS ist nicht valide!

 

[Zweipunktnull]

Ach nee, Kunststück.
Wer will kann das filter:alpha(opacity=75) auch in eine andere CSS-Datei auslagern und dann per CC einbinden.

Und das opacity ist nicht invalid, sondern CSS3. Der Validator hat halt nur kein CSS3 drauf - logischerweise, es ist ja noch gar nicht fertig.

überhaupt weiß ich nicht, was du mit "Dein CSS ist nicht valide!" sagen willst. Das man es nicht benutzen sollte? Naja, eigentlich bin ich ja auch für validen code, aber hier ist die lage ja ein wenig anders. der code ist laut validator invalid, aber nicht weil man einen fehler gemacht hat, sondern weil man dem validator gewissermaßen einen schritt voraus ist. obwohl ich auch ein "valid-wahn" habe muss ich sagen, das es mir in diesem fall gerade egal ist, was der validator meint. den CSS validator kann man eh vergessen, da er ein wenig tagesformabhängig ist (hab da schon dolle sachen erlebt^^).

 

[Yo Mr. White]

wenn ich den Filter in eine andere Datei schreibe wird das ganze auch nicht valider...
Wow, css3 welcher Browser außer der Opera kann das . Ich würde mich freuen wenn der IE wenigstens css2 könnte.

OK. Ich will hier nicht streiten. Vielleicht sollte "dummix" mal schreiben was er wirklich braucht, dann können wir vielleicht besser helfen, anstatt hier raten ;-)
Schönen Abend noch.

 

[Zweipunktnull]

>> Wow, css3 welcher Browser außer der Opera kann das .

Was hast du für ein Problem? Da nicht jeder Browser die Eigenschaft opacity unterstützt, habe ich ja auch noch die anderen als Workarounds dazugeschrieben.
Fakt ist: So funktioniert es in allen relevanten Browsern. Basta.

 

[Yo Mr. White]

ich weiß. siehe oben.

 

[Zweipunktnull]

Vielleicht sollte "dummix" mal schreiben was er wirklich braucht, dann können wir vielleicht besser helfen, anstatt hier raten ;-)

Das hat er doch bereits getan.

Mein konkretes Problem: Ich habe eine sich wiederholende Holztextur als allgemeinen Hintergrund des body-Elements und nun soll ein zentrierter div-Container einen Schatten haben. Da der div-Container, abhängig von der Fensterbreite, jedoch an verschiedenen horizontalen Positionen sein kann, muss der Schatten als halbtransparente Schicht über der Holztextur liegen.

Und dafür lässt sich meine CSS-only Variante gut einsetzen - es sei denn, der Schatten soll irgendwelche extravaganten Formen haben...

 

[Yo Mr. White]

oh,
das hab ich glatt übersehen ist schon spät.

 

[dummix]

Leider ist der Schatten keine einheitliche "Box", sondern enthält Abstufungen (durch Weichzeichnung; praktisch 1. Px 100% Deckkraft, 2. Px 75% D., 3. Px 50% D. usw.).
Die Tranzparenz kann ich leider auch nicht simulieren, da die Position des zentrierten div-Containers mit dem Schatten abhängig von der Fensterbreite ist. Beispiel:

Ich hoffe, es ist selbstklärend. Wie man an 1 und 2 sieht, sind die Stellen, an denen der Schatten bei unterschiedlichen Fensterbreiten ist jeweils unterschiedlich, also funktioniert simulierte Transparenz nicht.

 

[Yo Mr. White]

Dein Problem lässt sich ganz einfach lösen. Benutze PNG für die modernen Browser und der Rest bekommt keinen Schatten. Fertig.
Sorry, was anderes fällt mir nicht ein.

 

[dummix]

Anscheinend gibt es zurzeit keine Lösung für dieses Problem. Schade drum

Eine andere Frage: Kann der IE7 transparente PNG's, die via CSS mit background eingebunden sind, repeaten?

 

[Zweipunktnull]

>> Kann der IE7 transparente PNG's, die via CSS mit background eingebunden sind, repeaten?

Ich weiß es jetzt nicht 100%ig, aber so "aus'm Bauch" würde ich mal ja sagen.
Der MSIE7 ist wirklich ein riesen Fortschritt was die Unterstützung von Standards angeht. Da hat MS wirklich ordentlich aufgeholt - was nicht heißt, dass es nicht noch viel zu tun gebe.
Aber bei sowas ists doch das einfachste in der welt das einfach mal auszuprobieren.

 

[dummix]

Ich habe es ausprobiert, und anscheinend kann er das eben nicht. Kann ja sein, dass ich eventuell den Code für den IE7 falsch geschrieben habe, Einstellugnen nicht passen oder sonstiges.

 

[Zweipunktnull]

Hab's ausprobiert und es funktioniert einwandfrei. Der MSIE hat "Werkseinstellungen", sprich ich habe nichts an den Einstellungen verändert.

 

[-=Renegade=-]

Hab mal kurz gegoogelt, vllt hilft dir das ja weiter

<style type="text/css">
#layer {
background-image:url(bild.png);
}
</style>
<!--[if IE 6]>
<style type="text/css">
#layer {
filterrogid: DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale');
background:none;
}
</style>
<![endif]-->

Quelle

Getestet hab ichs jetzt nicht, aber die Kommentare sind vielversprechend.