15

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

原因(如果您有任何其他想法):我想在 CMS 模板中创建 3 层图像。第 1 层(底部)是背景图像。第 2 层位于第 1 层的一部分之上,是 A4 文档的矩形截屏图像。第 3 层(在顶部)是一个透明的 PNG(在其中心和边缘),它在第 2 层文档的右上角添加了边框、投影、文档类型徽标和卷页效果。

第 1 层和第 2 层将在 CMS 中分别上传,CSS 应将它们与第 3 层图像组合在一起以创建效果。问题是要使页面卷曲效果起作用,需要遮盖第 2 层的右上角,以便您可以看到从第 3 层到第 1 层的所有路径。我希望剪辑属性允许我指定第 2 层右上角的一个小方块,应该是不可见的。

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

4

1 回答 1

5

简单的答案:CSS 剪辑对此不起作用。

我看到两个选项:

  1. 尝试通过使用 Layer1 作为背景图像绘制 Layer3 来伪造“洞”。这将使 Layer3 的透明区域被 Layer1 填充。你可以在这里看到这个解决方案:http: //cssfilter.saschaseewald.com/

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

于 2013-08-24T18:40:37.950 回答