The CSS clip syntax gets you to define a rectangular area of a larger image that you wish to be visible. Is there a way to specify the inverse? Specify the rectangular area of the image that you wish to become invisible. Like punching a rectangular hole through the page to see what's underneath?
Reason (if you have any other ideas): I want to create a 3 layer image in a CMS template. Layer 1 (at the bottom) is a background image. Layer 2 sits over a portion of layer 1 and is a rectangular screengrab image of an A4 document. Layer 3 (on the top) is a transparent PNG (in its centre and at its edges) that adds a border, drop shadow, doc type logo and a page curl effect to the top right of the layer 2 document.
Layers 1 and 2 will be uploaded separately in the CMS and the CSS should combine them together with the layer 3 image to create the effect. The problem is for the page curl effect to work, the top right corner of layer 2 needs to be masked so that you can see all the way through from layer 3 to layer 1. I was hoping that the clip property would allow me to specify a small square in the top right corner of layer 2 that should be invisible.
Alternative: Is to use a graphics program to combine layers 1 and 3 together and leave a transparent area for layer 2. Then with the correct positioning you could place the new combined image on top of layer 2 to achieve the same effect. However, I was hoping to avoid graphics preparation like this because you may as well create the entire image that way.
Simple Answer: CSS clip will not work for that.
I see two options:
Try to fake the 'hole' by drawing Layer3 with Layer1 as a background image. This will make the transparent areas of Layer3 be filled with Layer1. You can see this solution in action here: http://cssfilter.saschaseewald.com/
Use the HMTL Canvas Element and its composite actions to combine the layers as you like. Overview: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/
来源：https://stackoverflow.com/questions/16078262/is-there-an-inverse-to-the-css-clip-property-hide-the-clipped-area