Image maskieren in CSS?
Ich habe zwei Bilder - ein Auto und ein Sticker; der Sticker soll auf das Auto "geklebt" werden, dabei soll, wie es auch bei einem richtigen Sticker so wäre, nur das von der Seite sichtbar sein was auch auf dem Auto klebt - sprich der Sticker muss an der blauen Linie abgeschnitten werden und es darf am Ende nur das sichtbar sein was über dem blauen Strich ist. Wie könnte man das in CSS umsetzen?
DIe Lösung soll möglichst dynamisch beziehungsweise allgemein sein, der Sticker soll ohne viel extra code verschoben und trotzdem richtig abgeschnitten werden.
1 Antwort
Also, was du machen kannst, ist in deinem CSS mit clip-path arbeiten. Damit sagst du quasi: "zeig nur den Teil des Stickers, der innerhalb dieser unsichtbaren Form liegt."
Mach dein .car Element zum Chef und sag, dass alles, was darin ist, sich danach richten muss. Das machst du mit position: relative;. Dann nimmst du dein .sticker Element und machst es zum kleinen Gehilfen, indem du position: absolute; nutzt. Jetzt kannst du es genau da positionieren, wo es hin soll.
Mit clip-path: polygon(...); malst du quasi eine unsichtbare Form, die sagt, welcher Teil des Stickers gezeigt werden soll. Du gibst einfach die Ecken der Form an, ähnlich wie beim Verbinden der Punkte.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Ist zwar etwas arbeit, funktioniert aber
Wenn du offen für ein bisschen JS bist, kannst du das Ganze dynamisch machen. Du könntest ein kleines Script schreiben, das die Position des Stickers nimmt und dann den clip-path entsprechend anpasst. Das kannst du mit JavaScript machen. Da müsste man sich aber genau überlegen wie du da vor gehst
Danke, funktionieren tut's aber sobald man den Sticker woanders hinkleben wollte müsste man das ganze von vorne machen - hast du vielleicht noch irgendeine allgemeinere Idee die man auf verschiedene Positionen schnell anwenden kann?