transparente Darstellungen...
ZumWaldschrat
- css
0 Daniel unreg0 Cheatah0 ZumWaldschrat0 ChrisB0 ZumWaldschrat0 ZumWaldschrat0 ChrisB
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
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ß
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.
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ß
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
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
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
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
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
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
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
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
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