CSS的“剪辑"是否与之相反?财产;隐藏修剪的区域? [英] Is there an inverse to the CSS "Clip" property; hide the clipped area?

问题描述

CSS剪辑语法可让您定义希望显示的较大图像的矩形区域.有没有办法指定逆数?指定您希望不可见的图像的矩形区域.就像在页面上打一个矩形孔以查看其底面是什么?

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?

原因(如果有其他想法):我想在CMS模板中创建3层图像.第1层(位于底部)是背景图像.第2层位于第1层的一部分上，是A4文档的矩形屏幕抓图图像.第3层(位于顶部)是一个透明的PNG(在其中心和边缘)，在第2层文档的右上方添加了边框，阴影，文档类型徽标和页面卷曲效果.

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.

第1层和第2层将分别在CMS中上传，CSS应该将它们与第3层图像结合在一起以创建效果.问题是要使页面卷曲效果起作用，第2层的右上角需要屏蔽，以便您可以看到从第3层到第1层的所有路径.我希望clip属性可以让我指定第2层右上角的小方块，应该不可见.

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.

替代::将使用图形程序将第1层和第3层组合在一起，并为第2层保留透明区域.然后，通过正确的定位，您可以将新的组合图像放置在第2层的顶部2达到同样的效果.但是，我希望避免这样的图形准备，因为您最好以这种方式创建整个图像.

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.

推荐答案

简单答案: CSS剪辑不适用于此.

Simple Answer: CSS clip will not work for that.

我看到两个选择:

1. 尝试通过使用Layer1作为背景图像绘制Layer3来伪造孔".这将使Layer3的透明区域被Layer1填充.您可以在此处查看此解决方案的实际操作: http://cssfilter.saschaseewald.com/

使用HMTL画布元素及其组合动作来根据需要组合图层.概述: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

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/

这篇关于CSS的“剪辑"是否与之相反?财产;隐藏修剪的区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！