Gradient und Hintergrundbild beim IE?

[Woody]

Moin zusammen,

bei Mozilla und Webkit Browsern kann man mit der CSS-Deklaration

background: url(meinhintergrundbild.gif), -moz-linear-gradient( top, #eee, #bbb); 
background: url(meinhintergrundbild.gif), -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#bbbbbb));
-webkit-background-origin: border-box; 
-webkit-background-clip: border-box;

Einen Farbverlauf hinter das Background-Image legen. Weiss jemand, wie die entsprechende Deklaration für die IE's lautet - den Verlauf allein bekomme ich mit

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffeeeeee, endColorstr=#ffbbbbbb);
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffeeeeee, endColorstr=#ffbbbbbb)";

hin - nur wie das Hintergrundbild drüberlegen???
Gruß,

Jörg

[hero-master]

Moin Jörg
ich habe leider hier keinen IE, um das zu testen, aber geht es da nicht einfach über background-image?

[Spacefish]

äh was für nen Sinn hat das nen Backgroundbild und nen Gradient zu haben? Also ich mein das BG Image liegt entweder vor dem Gradient oder dahinter, also ist eh nur eines sichtbar.

[wildmieze]

Naja, ich hab schon von Bildern gehört, die an manchen Stellen transparent sind..
.. ich hab diese Gradients noch nie benutzt - ich würd vermutlich ein Verlaufs-Bild in den body packen und das zweite Bild in ein passendes div. Aber interessant klingt es schon .. läuft das denn in allen Browsern (von der Frage des TE mal abgesehen^^) ..?

[Woody]

@nico: Wenn ich das background-image vor meinem eingangs genannten Code einbaue kommt es nicht. Baue ich es hinter der filter-Anweisung für den gradient ein, zerschiesse ich mir das Layout...

@Spacefish:


Wie, meinst Du, kommt der kleine Pfeil rechts auf den Button?

Wer gucken will worum es mir geht schaut sich das linke Menu auf http://www.yachtbatterie.de an. Im FF, Chrome und im Safari ist es genau so, wie ich es gern auch im IE hätte. Opera lässt den gradient weg, ist ansonsten aber auch o.k.
Grüße,

Jörg

[hero-master]

Ich würde dem IE einfach ein Hintergrundbild geben, dass sowohl den Pfeil als auch den Verlauf beinhaltet, bevor du dich mit diesen Filtern total verhaspelst

[Woody]

Dann müsste ich mit 32 verschiedenen Hintergrundbildern rumhampeln... so sind's nur 3...

[wildmieze]

wie kommst Du da auf 32 Hintergrundbilder? ich seh nur mit Pfeil, ohne Pfeil und blau. Der Text kommt ja nicht aufs Bild ..

[hero-master]

Hier bin ich gerade drübergestolpert. Da wird bestimmt was bei sein

[Woody]

@Wildmieze:
Mit Pfeil nach links, mit Pfeil nach unten, mit Punkt (der aktuell selektierte Artikel). Dann sind die Buttons in den einzelnen Ebenen unterschiedich breit...

@Nico: Danke für den Tipp, da wühl ich mich mal durch. Wenn ich die Lösung gefunden habe poste ich sie hier.
Gruß,

Jörg

[wildmieze]

.. unterschiedlich breit dürfte auch mit demselben Hintergrundbild kein Problem sein .. Pfeil nach unten und mit Punkt müssten dann erstellt werden, stimmt. Aber mir persönlich wär es da egal, ob ich nun den Pfeil und den Punkt einzeln als Bild habe, oder jeweils schon mit Hintergrund. Und bei letzterem kann ich so ziemlich jeden Browser überreden, das korrekt anzuzeigen, was meinen Kunden denn doch sehr wichtig ist^^ .. Aber hey, wie gesagt, ich find die Technik schon irgendwie interessant, und wenn es so klappt, warum nicht

[Woody]

Na, ein Punkt gegen die Bilder ist, dass die Buttons derzeit mit der vom User im Browser gewählten Schriftgröße skalieren - und der Hintergrund mitskaliert.

[wildmieze]

Ahso .. OK, sorry .. das hatte ich nicht berücksichtigt ..