我正在使用 html+css 和 jquery 自己创建一个网站。最近开始使用 Autoprefixe 附带的 SASS，这样我就可以更轻松地完成一些格式化并能够使用 sass 库。
我正在尝试将渐变 alpha 蒙版应用于一些我已经以“选框样式”循环的菜单项。
我首先在背景图像标签中为蒙版创建图像。这个想法是菜单上方和下方有两个框，由于 alpha 淡入淡出的工作原理，应用蒙版时黑色部分将最清晰，而框的透明部分将是文本消失的地方。经过一些调整后，我得到它看起来像这样：
.marquee:before {
transform: translateX(-50%);
top: 0;
background-image: linear-gradient(to top,rgb(0, 0, 0) 0%, transparent 100%);
}
.marquee:after {
bottom:0;
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 100) 0%, rgba(0, 0, 0, 0) 100%);
transform: translateX(-50%);
}
但是当我将 background-image 属性切换为 mask-image 时，它并没有真正掩盖 marquee-content（菜单项）。事实上，黑匣子似乎只是消失了，没有任何掩蔽发生。
.marquee {
width: var(--marquee-width);
height: 30vh;
overflow: hidden;
position: relative;
}
.marquee:before, .marquee:after {
position: absolute;
width: var(--marquee-width);
height: 1.5rem;
content: "";
z-index: 1;
}
.marquee:before {
transform: translateX(-50%);
top: 0;
mask-image: linear-gradient(to top,rgb(0, 0, 0) 0%, transparent 100%);
}
.marquee:after {
bottom:0;
mask-image: linear-gradient(to bottom,rgba(0, 0, 0, 100) 0%, rgba(0, 0, 0, 0) 100%);
transform: translateX(-50%);
}
.marquee-content {
margin-bottom:-1vh;
list-style: none;
height: 100%;
display: inline-flexbox;
animation: scrolling var(--marquee-animation-duration) linear infinite ;
animation-delay: 4s;
}
在这一点上，我不确定出了什么问题，即使我使用了 autoprefixer，Firefox 也是如此，这意味着我在逻辑方面没有做正确的事情。从我读到的内容中，alpha 蒙版也应该适用于元素的子元素，所以我的蒙版应该屏蔽掉选框内容。
这是我的HTML结构供参考
<!---Menu Container-->
<div class="menucontainer" id="fixedMenu">
<nav class="nav">
<li class=active></li>
<li class="menutitle scrollTop" id="myTitle">CIVR1</a></li>
<ul class="marquee">
<ul class="marquee-content">
<li><a class="menuitems nav-section1" href="#TheInitiator">the initiator</a></li>
<li><a class="menuitems nav-section2" id="m2" href="#TheJourney">the journey</a></li>
<li><a class="menuitems nav-section3" id="m3" href="#PatronOfTheSea">patron of the sea</a></li>
<li><a class="menuitems nav-section4" id="m4" href="#ExtremeBodies">extreme bodies</a></li>
<li><a class="menuitems nav-section5" id="m5" href="#DownloadVR">download vr</a></li>
<li><a class="menuitems nav-section6" id="m6" href="#PerformanceLibrary">performance library</a></li>
<li><a class="menuitems nav-section7" id="m7" href="#Partners">partners</a></li>
<li><a class="menuitems nav-section8" id="m8" href="#Contact">contact</a></li>
</ul>
</ul>
</nav>
</div>
所以是的，我一直在为此苦苦挣扎，非常欢迎任何帮助或建议！有没有其他方法可以达到这种效果？一个更好的？我只是坏吗？
*我还特意用 rgb 和 rgba 制作了面具，看看是否有问题。不是。:<