遮蔽/剪切 div

Posted 2023-03-23

【中文标题】遮蔽/剪切 div

【英文标题】：Masking/Clipping div

【发布时间】：2015-09-12 13:02:06

【问题描述】：

如何让 div #1(page-title) “剪切”通过 div #2(mainwrap) 并查看背景图像？

例子：

<div class="body">
<div class="mainwrap">
<div class="page-title">
</div>
</div>
</div>

CSS：

body background-image: url("/background.jpg");
.mainwrap background: #fff
.page-title background: none;

【问题讨论】：

请同时提供您的 html 的基本结构。

【参考方案1】：

您需要使用位图图像或 SVG 来制作遮罩。

.mainwrap 需要应用mask。遮罩必须是白色背景上的黑色文本（孔）（白色表示保留）。

见：http://www.html5rocks.com/en/tutorials/masking/adobe/