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/