Masking/Clipping div

Question

如何让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;} 

Answer 1

你需要为使用的位图图像或SVG，使你的面具。

.mainwrap将需要应用mask。面具需要是白色背景上的黑色文字（洞）（白色意味着保持）。

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