Mit der CSS-Clip-Syntax können Sie einen rechteckigen Bereich eines größeren Bildes definieren, das sichtbar sein soll. Gibt es eine Möglichkeit, die Umkehrung anzugeben? Geben Sie den rechteckigen Bereich des Bildes an, in dem Sie unsichtbar werden möchten. Wie ein rechteckiges Loch durch die Seite stanzen, um zu sehen, was darunter ist?Gibt es eine Umkehrung der CSS "Clip" -Eigenschaft; den ausgeschnittenen Bereich ausblenden?
Grund (wenn Sie weitere Ideen haben): Ich möchte ein 3-Layer-Bild in einer CMS-Vorlage erstellen. Ebene 1 (unten) ist ein Hintergrundbild. Die Ebene 2 befindet sich über einem Teil der Ebene 1 und ist ein rechteckiges Rasterbild eines A4-Dokuments. Ebene 3 (oben) ist ein transparentes PNG (in der Mitte und an den Rändern), das einen Rand, Schlagschatten, ein Doc-Logo und einen Seitencurl-Effekt rechts oben im Layer 2-Dokument hinzufügt.
Die Layer 1 und 2 werden separat im CMS hochgeladen und das CSS sollte sie zusammen mit dem Layer 3-Image kombinieren, um den Effekt zu erzeugen. Das Problem besteht darin, dass der Seitencurl-Effekt funktioniert. Die obere rechte Ecke von Layer 2 muss maskiert werden, damit Sie den gesamten Weg von Layer 3 zu Layer 1 sehen können. Ich hatte gehofft, dass die Clip-Eigenschaft es mir erlauben würde, anzugeben ein kleines Quadrat in der oberen rechten Ecke der Schicht 2, die unsichtbar sein sollte.
Alternative: Verwenden Sie ein Grafikprogramm, um Layer 1 und 3 miteinander zu kombinieren und einen transparenten Bereich für Layer 2 zu belassen. Dann mit der richtigen Positionierung können Sie das neue kombinierte Bild auf Layer 2 platzieren gleicher Effekt. Ich hatte jedoch gehofft, die Grafik-Vorbereitung so zu vermeiden, weil Sie genauso das gesamte Bild erstellen können.
Bizarre Lösung, die mir in den Sinn kommt: Zeichnen Sie die curl-Effekt in der Schicht 3 und das Hinzufügen eines Hintergrund (gleiche Hintergrund der Schicht 1), um die Ecke zu verstecken. Ein bisschen schlampig aber schnell ... – Arkana
Danke für die Kommentare. Ich war über diesen Link gestolpert, aber ich bin besorgt, dass es in einigen Browsern schlecht funktionieren könnte. Ich versuche auch Grafiken zu vermeiden, die die Zeit verlängern, die benötigt wird, um eine der 3 Ebenen zu ersetzen. Ich hatte einen anderen Gedanken. Ich könnte Layer 2 zu einem PNG machen und seine Ecke im Grafikprogramm manuell abschneiden (um transparent zu sein). Mein Effekt würde funktionieren und das Ersetzen von Layer 1 oder Layer 3 auf der Site wäre einfach. – Dominic