I'm encountering difficulty in applying a mask to only the top portion of an element rather than the entire element. I'm uncertain if I'm approaching this correctly.
I have an element called "footer" with a gradient. Behind this footer, there may be additional graphical elements.
My aim is to mask the top 100 pixels of this footer to create a smooth transition of the footer's gradient.
However, when I apply the mask, everything that isn't a colored object within the SVG is also masked away, including the area outside of the SVG.
The element
<footer class="footer">
</footer>
The styling
.footer {
position: relative;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
height: 200px;
-webkit-mask-image: url('@/../public/SVG/AutomationLanscape.svg');
mask-image: url('@/../public/SVG/AutomationLanscape.svg');
-webkit-mask-size: 1000px auto;
mask-size: 1000px auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-position: top;
}
This should create a landscape popping up from the footer element.
In this case the height of the SVG is not important, so if you just extend the SVG downwards, that is fine. Here is the SVG I use in the example:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<circle cx="100" cy="100" r="100" />
<circle cx="500" cy="50" r="50" />
<circle cx="900" cy="100" r="100" />
<rect y="100" width="1000" height="900" />
</svg>
It is 1000x1000 and the rectangle covers the part from y="100"
to the bottom and therefore makes the bottom part of the footer transparent.
.footer {
position: relative;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
height: 200px;
mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIiAgLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MCIgcj0iNTAiICAvPgogIDxjaXJjbGUgY3g9IjkwMCIgY3k9IjEwMCIgcj0iMTAwIiAgLz4KICA8cmVjdCB5PSIxMDAiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjkwMCIgLz4KPC9zdmc+Cgo=');
mask-size: 1000px auto;
mask-repeat: no-repeat;
mask-position: top left;
}
<footer class="footer"></footer>