Hallo,

ist es mittlerweile eigentlich möglich in HTML bzw. CSS Masken (z.B. mittels eines transparenten PNG) für Bilder zu definieren? Ähnlich wie in Photoshop die Masken oder in Illustrator die Schnittmasken.


Danke

ja

Hast du vielleicht einen Link dazu für mich? Oder den CSS-Befehl zum Googlen.
Danke!

Du kannst zum einen zwei DIV-Container übereinander positionieren oder das eine Bild als Hintergrundbild definieren und das transparente PNG dann in dem gleichen DIV-Container platzieren. Ist zwar nicht unbedingt die feine englische Art, aber es funktioniert. Für IE 6 braucht man allerdings einen „Hack“ wegen der transparenten PNGs. Für dynamische Masken müsste es was mit jquery geben.

Entweder mit transparenten PNGs und/oder mit CSS3 opacity (evtl. auch beides in Kombination, kommt drauf an, was Du konkret darstellen willst).

In CSS3 gibt es die Möglichkeit, jedem Element des DOM-Baumes (also z.B. einem <div>-Container) einen Transparenzwert (Alphakanal) zuzuweisen via der CSS-Eigenschaft opacity:

W3C: CSS3 color module: 3.2. Transparency: the ‘opacity’ property

CSS3.info: Opacity

Mittlerweile dürften alle aktuellen Browser opacity in der spezifikationsgemäßen nicht-vendor-geprefixten W3C-Notation (also ohne -moz-, -ms-, -webkit- oder -o-Prefix vorne dran) verstehen und umsetzen, die Vendor-Prefixes sind in diesem Fall also nicht mehr notwendig, es kann gefahrlos die vom W3C vorgegebene Notation verwendet werden. Also z.B. opacity: 0.6 wäre eine Transparenz von 60 Prozent bezogen auf den Maximalwert 1 (100%).

Beispiel (Hintergrundfarbe der Seite ist grün, die vor diesem Hintergrund liegende Menüliste <ul> ist weiß mit einem Transparenzwert von 60 Prozent (0.6)):


Auf die gleiche Art und Weise lassen sich bestimmt auch z.B. mehrere <div> übereinanderlegen, jeweils mit den Motiven z.B. als Hintergrundbild die Dir belieben zumindest die <divs> kann man dann mit entsprechendem Transparenz-Werten (Alphakanal-Werten) ausstatten. Es kann sogar sein, dass Transparenzwerte mittlerweile auch für Hintergrundbilder gehen, da weiß ich momentan aber nicht, in wieweit das alle Browser schon umgesetzt haben. Im Zweifel nachschlagen, ausprobieren oder/und dann ggf. die vendor-geprefixte Notation verwenden, falls sinnvoll und notwendig.

Man kann transparente Bilder mit Alphakanal verwenden, man kann inzwischen aber auch schneller, einfacher und variabler via CSS3 opacity eine Transparenz über das betreffende HTML-Element, welches das Bild enthält, erzeugen.

Noch besser: berücksichtige den gar nicht mehr, lasse ihn links liegen. Umso schneller stirbt er aus!

Google propagiert grad', dass sie ab August den nächsten Schwung an alten Browsern nicht mehr unterstützen wollen (konkret: IE 7, Safari 3, FF3.5, siehe dazu auch bzw. ), und ihr habt immer noch den IE6 im Kopf und macht euch Gedanken über dieses alte modrige Krüppelstück... So stirbt der nie aus und verschwindet von den Desktops, wenn es immer wieder noch Leute gibt, die ihn auch nur gedanklich noch berücksichtigen! Lasst ihn doch endlich mal in Ruhe und Frieden von uns gehen, statt immer noch irgendwelche Nutzer in ihrer Transusigkeit zu unterstützen, bloß keinen Finger rühren zu müssen. IE7 existiert (und wird jetzt auch schon abgeschrieben)! IE8 existiert! IE9 existiert!

Das mit den überlagerten DIVs war auch meine erste Idee. Dachte nur, dass es zwischenzeitlich eine elegantere Möglichkeit gibt, wie das man einem DIV oder IMG per CSS zuweisen kann, dass z.B. maske.png die Maske für das Bild oder das Element ist und dass die schwarzen Bereiche des PNGs in dem Bild ausgeblendet werden, weiß die darstellbaren Bereiche sind und die Grauabstufungen dann je nach Wert die Transparenzen (wie in Photoshop eben).

Aber trotzdem danke!

Kannst Du doch so trotzdem mal versuchen, wie Du das grad' formuliert hast. Definiere die Bilder als Block-Element (display:block) und lege sie per CSS übereinander wie divs. Und wenn Du Transparenzen in den Bildern drinhast, dann siehst Du ja das Ergebnis, das dabei visuell rauskommt. Du kannst doch auf diese Weise Bilder übereinanderlegen, die aufgrund ihrer jeweiligen Beschaffenheit und Transparanz wie eine Schablone wirken können und Du diese übereinandergelegten Schichten per z-index in ihrer Reihenfolge steuern/bestimmen kannst. Das könnte gehen. Spiel doch mal ein bisschen damit rum.

Hab eine ganz gute und auch saubere Lösung gefunden. Stichwort: Mehrere Hintergrundbilder festlegen, was seit CSS 3 ja möglich ist. So spar ich mir übereinander gelagerte DIVs.

Auch eine gute Idee, allerdings: hast Du geprüft, dass diese CSS-Eigenschaft derzeit alle Browser irgendwie können? Entweder nach offizieller Notation oder als geprefixte Version. Ich habe lediglich im Kopf, dass Firefox das wohl vor einigen Monaten hinzubekam, wie es damit in den anderen Browsern aussieht ob und welche Notation, habe ich bislang noch nicht getestet, weil ich sowas bisher noch nicht benötigt habe.

Der IE8 hat halt pech

Ganz gute Übersicht: http://www.normansblog.de/demos/browser-support-checklist-css3/

OK. Dann mal los!

ja: CSS Masks.

http://caniuse.com/css-masks