ronni: transparenz

hi,

Ist es möglich eine grafik zu 50 % transpaent zu machen, damit der hintergrund durchscheint?

mfg
ronni

  1. Hallo,

    Ist es möglich eine grafik zu 50 % transpaent zu machen, damit der hintergrund durchscheint?

    Nutze alphatransparente PNGs dann funktioniert das zumindest in den neueren Browsern. Für den IE >=5.5 gibt es dann noch einen JavaScript Workaround um das zum funktionieren zu bringen http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

    Weitere Informationen zum Thema PNG findest du hier: PNG - die Vorurteile und die Fakten.

    Grüße
    Jeena Paradies

    1. ich hab das immer mit:

      filter:alpha(opacity=75);
        -moz-opacity:0.75;

      gemacht. dadurch wird die transparenz auf 75% gesetzt

      1. Hallo

        filter:alpha(opacity=75);
          -moz-opacity:0.75;

        Allerdings auch für alle Inhalte des Elements (Texte etc.).

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.1
        1. Moin!

          Also man kann aufjedenfall ein Bild transparent machen, und darüber einen nicht transparenten Text, muss nur ein bisschen die Fantasy benutzen.

          Ich hatte das damals so gemacht:

          Ich hatte eine Tabellenspalte, in diese habe ich dann ein Div eingefügt, welches das transparente Bild enthält. Danach habe ich das Div wieder geschlossen, und wieder ein Div erstellt (absolute Position) und dort den untransparenten Text eingegeben. Die beiden Divs überlagern sich, somit ist das transparente Bild unter dem normalen Text.

          Transparenz habe ich wie vorgeschlagen gelöst:

          filter:alpha(opacity=75);
            -moz-opacity:0.75;

          www.special-car-tuning.com Oben Rechts sind diese TopAngebote, da kannste ja mal nach dem Queltext schauen, das ist bissel zu viel für SELFHTML, und ich bin zu faul das jetzt zu formatieren.

          1. Hallo

            Moin!

            ... muss nur ein bisschen die Fantasy benutzen.

            Geht das auch in deutsch?

            Ich hatte eine Tabellenspalte, in diese habe ich dann ein Div eingefügt, welches das transparente Bild enthält. Danach habe ich das Div wieder geschlossen, und wieder ein Div erstellt (absolute Position) und dort den untransparenten Text eingegeben. Die beiden Divs überlagern sich, somit ist das transparente Bild unter dem normalen Text.

            Ich hoffe, du hast auch das Elternelement des absolut positionierten divs aus dem Elementfluss genommen[1]. Sonst klappt das nur solange, bis sich, aus welchen Gründen auch immer, die Position des zu überdeckenden Elements verändert. Eventuell wird noch etwas Spielerei mit dem z-index nötig.

            [1] Die eingemessene Ecke (z.B. oben links, top:...; left:...;) eines absolut positioniertes Element bezieht sich entweder auf ein Vorfahrenelement, dass ebenfalls eine andere Positionierung als 'static' hat, oder, falls es ein solches nicht gibt, auf den <body>. Trifft letzteres zu, und die Position des darunterliegenden Elements verändert sich, liegt das absolut positionierte Element nicht mehr an der vorgesehenen Stelle.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.1
            1. Moin!

              Keine Ahnung von was du redest Auge,  bei meinem Code sind beide Divs in einer Tabellenspalte(mit festen Werten), und somit können die nirgends anders positioniert werden.

              Gruß

              Anton

              1. Hallo.

                Keine Ahnung von was du redest Auge,  bei meinem Code sind beide Divs in einer Tabellenspalte(mit festen Werten), und somit können die nirgends anders positioniert werden.

                Natürlich können sie das -- abgesehen davon, dass sie nicht in Spalten, sondern in Zellen stehen und insgesamt so überflüssig sind wie der Großteil des Quältextes der genannten Seite, die technisch tatsächlich zu nichts außer der Demonstration der Transparenz zu gebrauchen ist.
                MfG, at

  2. Hallo ronni.

    Ist es möglich eine grafik zu 50 % transpaent zu machen, damit der hintergrund durchscheint?

    Ja.

    Möglichkeit 1: Verwende eine alphatransparente PNG.
    Problem: der IE < Version 7 kann ohne weitere Hilfe damit nichts anfangen.
    Lösungsmöglichkeit: Nutze den AlphaImageLoader-Filter oder nimm in Kauf, dass die Grafik im IE nicht alphatransparent ist. Hier empfielt sich der Farbgebung wegen zumindest die Hintergrundfarbe mitzuspeichern, der IE zeigt dann diese an.

    Möglichkeit 2: Verwende die opacity-Eigenschaft (für Firefox >= 1.5 und Opera 9) zuzüglich ggf. -moz-opacity (für Firefox < 1.5) und -khtml-opacity (für Konqueror und ältere Safari).
    Problem: Sämtliche Objekte in dem Element, welches du alphatransparent machst, erhalten die selbe Transparenzstufe; der ggf. enthaltene Text wird damit also schwer lesbar. Eine mögliche Lösung findest du hier.

    Einen schönen Mittwoch noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Hallo Gunnar™.

      Hier empfielt sich der Farbgebung wegen zumindest die Hintergrundfarbe mitzuspeichern, der IE zeigt dann diese an.

      Ich wusste doch, dass ich hierzu schon einmal etwas angefertigt hatte: „Hintergrundfarbe für PNGs im IE“.

      Einen schönen Mittwoch noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]