I have a div that I want to give a regular background-image modified by a mask-image, so that the page background, which uses background-attachment: fixed; can "float" as if seen through a window, behind the div.
For the mask image, I want to be able to use either PNG or SVG.
Even if I use an SVG, I would rather not use the mask:url(mask.svg#element); method because the SVG artwork may not be simple clipping masks, but also include shades of gray in the form of blurs, gradients, etc.
I would like the mask to use the standard white = opaque / black = transparent schema. I believe mask-mode: alpha; is correct for this configuration?
Here's what I've managed to get working so far. The trouble is that it relies on an SVG id (instead of a whole image), and also the size is way smaller than the div, for some reason.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #174;
background-color: #def;
font-family: sans-serif;
}
.masked-bg {
width: 600px;
height: 600px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAL0lEQVQIW22KQQ4AMAjC4P+PZlXnzZoYwVpypFjACsHmCtPlZwxAaCqf5XzWWPsB9TsMBL7veUEAAAAASUVORK5CYII=);
background-repeat: repeat;
background-attachment: fixed;
background-size: 10px;
image-rendering: pixelated;
mask-image: url(#svgmask);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-origin: content-box;
}
</style>
</head>
<body>
<h1>mask-image</h1>
<p>with a fixed background</p>
<div class="masked-bg"></div>
<svg width="0" height="0"> <!-- sized to 0 because this SVG data is only to be used in the div background -->
<mask id="svgmask">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
<text x="0" y="36" fill="white" transform="rotate(30 20,40)" font-family="sans-serif">V e c t o r</text>
</mask>
</svg>
</body>
</html>