By utilizing Javascript, you have the ability to monitor the opened.zf.offcanvas event and manually incorporate a grey overlay to the element that contains the off-canvas-content class. On the other hand, watch for the closed.zf.offcanvas event and eliminate the added CSS when triggered.
Referencing the code example provided in the Foundation documentation:
Using HTML:
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li><a href="#">Foundation</a></li>
<li><a href="#">Dot</a></li>
<li><a href="#">ZURB</a></li>
<li><a href="#">Com</a></li>
<li><a href="#">Slash</a></li>
<li><a href="#">Sites</a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Page content -->
</div>
</div>
</div>
</body>
Then:
$('.off-canvas-wrapper').on('opened.zf.offcanvas', function() {
$('.off-canvas-content').addClass('grey-out');
});
$('.off-canvas-wrapper').on('closed.zf.offcanvas', function() {
$('.off-canvas-content').removeClass('grey-out');
});
grey-out class:
.grey-out {
background: rgba(60,60,60,0.75) !important;
z-index: 1000;
}
This has not been tested but it illustrates the concept.