Ergebnis 1 bis 13 von 13

Thema: Gradient und Hintergrundbild beim IE?

  1. #1
    TP-Junior
    Registriert seit
    Feb 2002
    Ort
    Altes Land
    Beiträge
    28

    Gradient und Hintergrundbild beim IE?

    Moin zusammen,

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

    Code:
    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

    Code:
    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

  2. #2
    TP-Moderator Avatar von hero-master
    Registriert seit
    Mar 2003
    Ort
    Hamburg
    Beiträge
    5.927
    Moin Jörg
    ich habe leider hier keinen IE, um das zu testen, aber geht es da nicht einfach über background-image?

  3. #3
    TP-Junior
    Registriert seit
    Sep 2004
    Beiträge
    14
    ä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.

  4. #4
    TP-Specialist Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    2.139
    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^^) ..?

  5. #5
    TP-Junior
    Registriert seit
    Feb 2002
    Ort
    Altes Land
    Beiträge
    28
    @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
    Geändert von Woody (22.09.2010 um 11:44 Uhr)

  6. #6
    TP-Moderator Avatar von hero-master
    Registriert seit
    Mar 2003
    Ort
    Hamburg
    Beiträge
    5.927
    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

  7. #7
    TP-Junior
    Registriert seit
    Feb 2002
    Ort
    Altes Land
    Beiträge
    28
    Dann müsste ich mit 32 verschiedenen Hintergrundbildern rumhampeln... so sind's nur 3...

  8. #8
    TP-Specialist Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    2.139
    wie kommst Du da auf 32 Hintergrundbilder? ich seh nur mit Pfeil, ohne Pfeil und blau. Der Text kommt ja nicht aufs Bild ..

  9. #9
    TP-Moderator Avatar von hero-master
    Registriert seit
    Mar 2003
    Ort
    Hamburg
    Beiträge
    5.927
    Hier bin ich gerade drübergestolpert. Da wird bestimmt was bei sein

  10. #10
    TP-Junior
    Registriert seit
    Feb 2002
    Ort
    Altes Land
    Beiträge
    28
    @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

  11. #11
    TP-Specialist Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    2.139
    .. 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

  12. #12
    TP-Junior
    Registriert seit
    Feb 2002
    Ort
    Altes Land
    Beiträge
    28
    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.

  13. #13
    TP-Specialist Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    2.139
    Ahso .. OK, sorry .. das hatte ich nicht berücksichtigt ..

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. [CSS] media: print -> Hintergrundbild beim ausdruck zu klein.
    Von nicnac1 im Forum HTML & CSS
    Antworten: 3
    Letzter Beitrag: 03.11.2006, 15:52
  2. Gradient Tool
    Von Future im Forum Photoshop
    Antworten: 1
    Letzter Beitrag: 30.07.2004, 23:06
  3. RADIAL GRADIENT - Funktion
    Von vlordkainv im Forum Flash & Multimedia
    Antworten: 0
    Letzter Beitrag: 28.06.2004, 02:38
  4. Sauberer Gradient! Aber wie?
    Von Moppulous im Forum Fireworks
    Antworten: 4
    Letzter Beitrag: 24.12.2003, 17:30
  5. Antworten: 6
    Letzter Beitrag: 19.06.2003, 18:58

Stichworte

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51