Maskierung mit Grafik

[Jörg]

Entschuldigt, ich muss euch mit einer - vermutlich ganz dummen - Frage belästigen. Aber das hat mich fast zur Verzweiflung gebracht. Ich wollte eine Grafik mithilfe einer anderen Grafik maskieren. Und habe dabei folgenden sehr schlichten Code geschrieben:

<img src="celsius.jpg" style="mask:url(maske.png);">

Es wollte einfach nichts werden, gar nichts wurde angezeigt. Bis ich nach zwei Stunden auf die Idee gekommen bin, das (mitsamt der beiden Grafiken) auf meinen Server hochzuladen. Und von dort abgerufen funktioniert es einwandfrei! Wie kann das sein?

[Rolf B]

Hallo Jörg,

guck ins Netzwerktab der Entwickerwerkzeuge. Möglicherweise ein same-origin Problem (file:/// ist per Definition nie same-origin).

mask solltest Du aber nur mit Vorsicht verwenden. Die Unterstützung ist nicht so gut.

Rolf

[Henry]

Hallo Rolf,

mask solltest Du aber nur mit Vorsicht verwenden. Die Unterstützung ist nicht so gut.

wenn ich da nichts falsch verstehe, dann in Kombi mit BrowserPräfix aber schon, oder?

Gruss
Henry

[Matthias Scharwies]

Servus!

Hallo Rolf,

mask solltest Du aber nur mit Vorsicht verwenden. Die Unterstützung ist nicht so gut.

wenn ich da nichts falsch verstehe, dann in Kombi mit BrowserPräfix aber schon, oder?

Genau, alles außer IE9-11.

Und da es nur noch den -webkit-Browserpräfix gibt, auch nur 2 Zeilen CSS.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Henry,

-webkit-mask-box-image: This feature is non-standard and should not be used without careful consideration.

D.h. darauf würde ich nun wirklich verzichten. Der image-Aspekt der mask Eigenschaft ist nämlich das, was brauchbar unterstützt ist, und mask-box-image hat eine etwas andere Semantik.

Aber okay, was ich bei "mask" übersehen habe, ist den Hinweis auf -webkit-mask, das eine "leicht andere Syntax" habe. Weil es auch das Setzen von -webkit-mask-attachment erlaubt.

Ich finde die Kompatibilitätsangaben aber schwer verwirrend. Sie benennen Edge ab Version 12, ohne Präfix, was aber vermutlich nur "bis Version 18" bedeuten kann, denn ab da haben wir ja Edgemium.

Also - okay - man kriegt damit wohl einiges hin, aber für Webkit braucht man Präfixe und die Detaileigenschaften haben auch teils andere Werte. Mein "Vorsicht" ist also durchaus angebracht, wenn auch vielleicht anders, als ich es ursprünglich meinte.

Bei mask-image, -clip scheint man safe zu sein. Der Rest ist mir jetzt zu mühsam, ich müsste alle Einzeleigenschaften durchkauen.

Rolf

[Jörg]

Danke für alle Antworten. Habe das Problem leider trotzdem noch nicht herausfinden können. Beide Bilder sind aus demselben Verzeichnis und es wird trotzdem nur leerer Raum angezeigt... keine Fehlermeldungen... Alles andere funktioniert mit mask, bloß nicht das Maskieren eines Bildes durch ein anderes. Naja, wenn die Unterstützung durch die Browser eh nicht so reibungslos ist, lässt sich das wohl auch anders lösen. Meine "Forschungen" sind zur Zeit eh nur theoretisch, mir ist für die Praxis auch noch kein Fall eingefallen, in dem man notwendig auf diese Technik angewiesen wäre. Man kann ja auch ein schnödes Bildbearbeitungsprogramm nehmen oder zwei Bilder per position übereinanderlagern...

[Rolf B]

Hallo Jörg,

ich habe das jetzt mal nachzustellen versucht.

• Ein SVG Bild gemalt mit einem schönen Schlangenstern, schwarz.
• Ein PNG gemalt mit Filzstift-Effekt, die Zahl 12

Das Ganze in eine Figure geklebt:

<figure>
<figcaption>TESTBILD</figcaption>
<img src="img12.png" alt="">
</figure>

<figure class="maskSrc">
<figcaption>Die  Maske</figcaption>
</figure>

und gestyled

body {
   background-color: #ccc;
}
figure {
	border: 20px solid green;
	background-color: #f0f;
	width: 250px;
	height: 250px;
	text-align: center;
}
figure.maskSrc {
	background-image: url(stern.svg);
	background-size: 290px 290px;
	background-position: center center;
	background-repeat: no-repeat;
}

Sieht so aus:

Und dann hab ich noch eine dritte figure gemacht:

<figure class="masked">
<figcaption>TESTBILD mit Maske</figcaption>
<img src="img12.png">
</figure>

figure.masked {
	-webkit-mask-image: url(stern.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 200px 200px;
	-webkit-mask-position: center left;
	mask-image: url(stern.svg);
	mask-mode: alpha;
	mask-size: 290px 290px;
	mask-position: center center;
	mask-repeat: no-repeat;
}

Und das sieht so aus, in Chrome und Firefox.

So weit, so gut. Folgendes habe ich dabei gelernt:

• da, wo das Maskenbild endet, wird das Element transparent.

• Chrome versteht keinen mask-mode. Auch keinen -webkit-mask-mode. Chrome macht nur eine alpha-Maskierung. Eine luminance-Maskierung gelingt nur im Firefox, allerdings nicht mit meinem schwarzen Stern. Dafür musste ich noch einen weißen Kreis dahinter legen, und dann kam sowas raus:

• Chrome und Firefox verhalten sich unterschiedlich, wenn sie die Maske nicht laden können. Chrome schaltet dann die Maskierung ab, und Firefox macht eine 0x0 Pixel Dummymaske, denn das Bild im Fuchs ist im alpha- und im luminance-mode beide Male nicht da.

• Firefox versteht auch die -webkit- Eigenschaften! Außer mask-mode, der darf nicht geprefixt sein.

• Lädt man die Seite von file:///..., werden normale Bilder anzeigt. Mein img12.png kommt, und wenn ich das Maskenbild als Hintergrund der Figure setze, kommt es auch. Aber eine mask unterliegt aus irgendwelchen Gründen den CORS Regeln und wird bei einer file:/// URL nicht geladen.

• Ein Workaround: Das Maskenbild in eine data-URL konvertieren und diese als mask-image angeben.

Alles noch sehr unausgegoren, scheint mir.

Rolf