PNG-Shadows+Transparenz - Wie cross-browser optimieren?

Diskutiere mit über: PNG-Shadows+Transparenz - Wie cross-browser optimieren? im Web Page Design Forum

  1. catvarlog

    catvarlog Thread Starter MacUser Mitglied

    Beiträge:
    1.468
    Zustimmungen:
    1
    Registriert seit:
    30.01.2005
    die sitaution:

    es geht um div-basisertes css-layout

    • 2-coloumns (YAML 2-col fixed), centered (mittig)
    • background-image => fixed (scrollt also nicht mit)
    • das "background-image" ist mehrfarbig strukturiert
    • der gesamtcontainer soll von einem fluffigen schatten eingerahmt werden. dieser muss transparent sein, da das background-image strukturiert ist und nicht mitscrollt (fixed).
    • die länge des gesamtcontainers ist nicht bekannt, da beliebig viel inhalt auf "einer seite" dargestellt werden kann.

    wie zur hölle kann man das crossbrowser kompatibel realisieren. hat jemand vielleicht einen guten link parat?
     
  2. dms

    dms Gast

    Kommt drauf an was Du mit "Crossbrowser" genau meinst. Für ein wenig ältere Browser wird es da wahrscheinlich keine Möglichkeit geben.

    Das grösste (bzw. einzige) Problem bei den aktuellen Browsern ist der IE6. Dieser htc-Hack wird wahrscheinlich nicht mit Hintergrundgrafiken funktionieren, aber wie auch immer, so wäre es eh schöner:

    Für alle anständigen Browser definierst Du im Contentbereich ein teiltransparentes PNG als HG. (Also der fluffige Schatten)

    background-image:url(teiltransparent.png);

    Speziell für den IE biegst Du dass dan in einem Conditional-Comment wieder hin. Dazu definierst Du eine nichttrasparente Grafik als HG, und legst einen Alpha-Filter drüber:

    background-image:url(nichttransparent.png);
    filter:alpha(opacity=xx);

    Alternativ könntest Du auch anders herum vorgehen und für alle Browser eine nichttransparente Grafik definieren und dann mit den verschiedenen Angaben transparent machen:

    filter:alpha(opacity=xx); <-IE Win ab 5.5
    -moz-opacity:xx; <-Mozilla
    opacity:xx; <-W3C-Standard

    Dann müsstest Du jedoch zumindest für Opera eine transparente Grafik definieren, denn der kann leider noch immer keine Trasparenz.

    Ich weis nun allerdings nicht wie es sich dann im Detail mit der Trasparenz der Inahlten verhält. Theoretisch müsste der Inahlt des Content-Containers ebenfalls transparent sein. Vlt. kann man das wieder richten indem man den Inahlt in einen weiteren Container stopft und hier die Transparenz wieder abschaltet.

    Falls das ein Teil Deiner Frage war, dann schau Dir mal das an: http://www.redmelon.net/tstme/4corners/ Ich hab das Beispiel vor einiger Zeit mit über 30 Browsern getestet, alles tutti.

    Edit: Ach ja, was noch zu erwähnen wäre: Soche teiltransparenten Bereiche zehren ziemlich an der Performance. Da stockt mein drei Jahre alter P4 bei manchen Seiten sogar.
     
    Zuletzt von einem Moderator bearbeitet: 12.12.2005
  3. catvarlog

    catvarlog Thread Starter MacUser Mitglied

    Beiträge:
    1.468
    Zustimmungen:
    1
    Registriert seit:
    30.01.2005
    hallo dms, danke für deine ausführliche antwort, die mit weiter hilft!

    mit "Crossbrowser" meine ich "die gängisten" - IE 5.5 => 6, Firefox, Safari, Opera...

    wir probieren es gerade mit "filter".
    habe dazu auch folgenden nette link gefunden:
    http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

    bzgl. länge der inhalte: das hatte ich erwähnt, da die mir bekannten png-hacks eine width/height-defintion der pngs brauchen und daher nicht im rahmen von repeater-backgrounds per css funktionieren...
     
  4. dms

    dms Gast

    Bin gerade selbst auf das Problem gestossen. Filter, in diesem Fall Alpha, lassen sich nicht überschreiben. Speziell für diesen Fall habe ich aber eine Lösung gefunden. Den Text in ein weiteres Element packen und dessen position auf relative setzen. Dann wird der Text interessanterweise nicht mehr transparent dargestellt.

    Also so inetwa:
    Code:
    <div style="background-image:url(...);filter:Alha(...);">
       <div style="position:relative;">Text</div>
    </div>
    Versteht zwar kein Schwein, aber hey, funktioniert. ;)
     
Die Seite wird geladen...
Ähnliche Themen - PNG Shadows+Transparenz cross Forum Datum
Internet-Explorer Hintergrund-png Web Page Design 15.03.2009
CSS-Lösung für IE-PNG-Problem? Web Page Design 10.07.2008
PNG Bild in IE 6 wird nicht angezeigt. Web Page Design 22.02.2008
PNG JPG und GIF - Bilder mit Pfiff Web Page Design 16.11.2007
PNG Problem … need help!! Web Page Design 30.03.2006

Diese Seite empfehlen

Benutzerdefinierte Suche