ZumWaldschrat: transparente Darstellungen...

Hallo zusammen,

wer kann mir bitte bei zwei Fragen weiterhelfen?

Zum einen habe ich es über " filter: alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; " geschafft, daß das damit erstellte Element teilweise durchsichtig ist. Mir ist aufgefallen, daß ich alle drei Angaben dazu machen muß und nicht etwa nur " filter: -moz-opacity:0.4; ", da ich den Firefox 3.0.6 verwende. Warum ist das so?

Zum anderen möchte ich ein Element in einem teilweise durchsichtigen Element wieder mit voller Deckkraft darstellen. Das geht aber irgendwie nicht. Habt Ihr da Tips für mich?

Danke, Gruß
Holger

  1. Hallo,

    Zum einen habe ich es über " filter: alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; " geschafft, daß das damit erstellte Element teilweise durchsichtig ist. Mir ist aufgefallen, daß ich alle drei Angaben dazu machen muß und nicht etwa nur " filter: -moz-opacity:0.4; ", da ich den Firefox 3.0.6 verwende. Warum ist das so?

    Die filter-Eigenschaft ist von Microsoft eingeführt worden. opacity ist die Standardkonforme notation und -moz-opacity war mal die Angabe, die Gecko-Browser (z. B. Firefox) benötigten um den Effekt anzuwenden.

    Inzwischen kannst du -moz-opacity weglassen, Gecko unterstützt die standardkonforme Notation schon seit Jahren.

    Zum anderen möchte ich ein Element in einem teilweise durchsichtigen Element wieder mit voller Deckkraft darstellen. Das geht aber irgendwie nicht. Habt Ihr da Tips für mich?

    opacity 'nimmt' das Element, dem du es zugewiesen hast und macht es transparent, ohne Rücksicht auf Verluste. Innerhalb dieses Bereichs sind die Elemente und Bestandteile zwar transparent, haben aber einen opacity-Wert von 1.

    Was du sichst ist evtl. die Notation von transparenten Farben z. B. durch rgba(), die aber momentan noch nicht alle Browser unterstützen.

    Gruß

    1. Hi,

      Die filter-Eigenschaft ist von Microsoft eingeführt worden. opacity ist die Standardkonforme notation und -moz-opacity war mal die Angabe, die Gecko-Browser (z. B. Firefox) benötigten um den Effekt anzuwenden.

      ergänzend: Das "-moz-" ist ein (inzwischen vom W3C ratifiziertes) Verfahren, um proprietäre oder vorläufig implementierte Eigenschaften, Werte, Selektoren oder @-Regeln anzusprechen. Andere Hersteller machen es ebenso, jeweils mit einem von ihnen selbst festgelegten Kürzel. Selbst Microsoft ist mit dem IE 8 zu diesem Verfahren übergegangen - für diesen Browser müsstest Du also "-ms-filter" angeben[1], wenn er die opacity-Eigenschaft nicht verstehen würde.

      Was du sichst ist evtl. die Notation von transparenten Farben z. B. durch rgba(), die aber momentan noch nicht alle Browser unterstützen.

      Die häufig verwendete Alternative ist eine teiltransparente PNG-Grafik, zu dessen korrekter Darstellung man den IE treten muss (filter: AlphaImageLoader), was er wiederum mit teilweiser Funktionsverweigerung innerhalb des Elements quittiert.

      Cheatah

      [1] Zudem müssen die Eigenschaftswerte bei der ehemaligen filter-Eigenschaft in Quotes gesetzt werden, da sie ansonsten nicht standardkonform sind. Microsoft macht gerade eine Wandlung durch, die mir durchaus gefällt.

      --
      X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      1. Hallo,

        Selbst Microsoft ist mit dem IE 8 zu diesem Verfahren übergegangen - für diesen Browser müsstest Du also "-ms-filter" angeben[1], wenn er die opacity-Eigenschaft nicht verstehen würde.

        IE 8 wird 'opacity' nicht verstehen.

        [1] Zudem müssen die Eigenschaftswerte bei der ehemaligen filter-Eigenschaft in Quotes gesetzt werden, da sie ansonsten nicht standardkonform sind. Microsoft macht gerade eine Wandlung durch, die mir durchaus gefällt.

        Jain, im IE8 wird jede Eigenschaft einmal mit und einmal ohne -ms-Präfix verfügbar sein. Filter sind hier eine kleine Ausnahme, da man hier Quotes setzen muss, wenn man den -ms-Präfix verwendet, bei der "normalen" filter: Notation jedoch nicht.

        Gruß

      2. Hi,

        eine teiltransparente PNG-Grafik, zu dessen korrekter Darstellung

        zu _deren_ Darstellung.

        Sagt der Deutsch-Validator.
        Wie konnte _Dir_ das passieren, daß Du invaliden Code benutzt? ;-)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Moin.

          Wie konnte _Dir_ das passieren, daß[!] Du invaliden Code benutzt? ;-)

          Wenn wir schon dabei sind: Die von dir verwendete Sprachversion ist 'deprecated'. Ein Glück, dass die meisten Parser abwärtskompatibel arbeiten und eine hohe Fehlertoleranz aufweisen.

          Christoph

          1. Hi,

            »» Wie konnte _Dir_ das passieren, daß Du invaliden Code benutzt? ;-)

            Wenn wir schon dabei sind: Die von dir verwendete Sprachversion ist 'deprecated'.

            Ich verwende Deutsch Traditional, nicht Deutsch Deformed [sic!].

            Aber der von mir gemeldete Fehler tritt sowohl in in Traditional als auch in Deformed auf.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Moin.

              Ich verwende Deutsch Traditional, nicht Deutsch Deformed

              Man kann es mit der Traditionalität aber auch übertreiben:

              Die erde vnd alle jr behaltung ist auff vnstettigkeyt gepauwet.

              Am beschde mer schreiwe wie mer schwätze: wie unsern Schnuud gewachse is.

              Christoph

    2. Hallo und danke für die schnellen Antworten!

      Inzwischen kannst du -moz-opacity weglassen, Gecko unterstützt die standardkonforme Notation schon seit Jahren.

      aha, ja Du hast recht. Aber die beiden Angaben "filter: alpha(opacity=40); opacity:0.4;" muß ich verwenden. Naja, ist halt so...

      opacity 'nimmt' das Element, dem du es zugewiesen hast und macht es transparent, ohne Rücksicht auf Verluste. Innerhalb dieses Bereichs sind die Elemente und Bestandteile zwar transparent, haben aber einen opacity-Wert von 1.

      hm, schau mal auf diese live-preview eines Joomla! Templates. Die machen genau das! (http://www.joomlademos.de/home?template=papagei)

      Gruß
      Holger

      1. Hi,

        opacity 'nimmt' das Element, dem du es zugewiesen hast und macht es transparent, ohne Rücksicht auf Verluste. Innerhalb dieses Bereichs sind die Elemente und Bestandteile zwar transparent, haben aber einen opacity-Wert von 1.

        hm, schau mal auf diese live-preview eines Joomla! Templates. Die machen genau das! (http://www.joomlademos.de/home?template=papagei)

        Ja, die machen "genau das" - genau das, was dir vorgeschlagen wurde, naemlich die Teiltransparenz mit einem PNG-Hintergrundbild simulieren.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Hi,

          Ja, die machen "genau das" - genau das, was dir vorgeschlagen wurde, naemlich die Teiltransparenz mit einem PNG-Hintergrundbild simulieren.

          okay, werd mich da mal reinhängen! Auf jeden Fall danke für diesen Hinweis. Da werde ich heute noch viel googlen müssen ;-)

          Gruß
          Holger

        2. Hi ChrisB,

          kannst Du mir bitte verraten, welches Bild in dieser live-preview das teiltransparente PNG ist? Dann verstehe ich vielleicht schneller :-)

          Danke, Gruß
          Holger

          1. Hi,

            kannst Du mir bitte verraten, welches Bild in dieser live-preview das teiltransparente PNG ist? Dann verstehe ich vielleicht schneller :-)

            Das kann ich - es ist (u.a.) das Bild http://www.joomlademos.de/templates/papagei/css/../images/Sheet-c.png

            Allerdings hilft's dir vielleicht eher, wenn ich dir sage, dass dieses dem Element <div class="Sheet-cc"> als Hintergrundbild verpasst wurde. Wenn du dessen Hintergrundbild z.B. im Firebug deaktivierst, dann bleibt vom Transparenzeffekt des Hauptinhaltsbereiches nicht mehr viel uebrig.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“