如何在不使用CSS属性mix-blend-mode:multiply的情况下获得混合模式效果

我想做一件看起来像这个代码输出的事情，但不使用css的属性

mix-blend mode:multiply

，以便获得对一些旧版本的moderns浏览器的支持

CSS的这个功能支持率仍然很低，看看这个链接

.active{
字号：80px；
字体系列：“DejaVu Sans”；
文本对齐：居中；
颜色：#646e7a；
}
.active:：之后{
背景：#00d7a7无重复滚动0；
内容：“；
高度：45px；
左：10%；
边际上限：0；
混合模式：倍增；
位置：绝对位置；
右：10%；
最高：13.8%；
}

网状物

我发现这是一个很好的解决方案：

.active{
背景：#00d7a7无重复滚动0；
颜色：rgba（30,40,52,0.73）；
字体系列：“DejaVu Sans”；
字号：80px；
高度：45px；
线高：0.6；
位置：相对位置；
文本对齐：居中；
顶部：20px；
}

网状物

文本上的

rgba（100110122,0.8）

值如何？（使文本半透明）更改alpha不会更改混合模式。谢谢@marcellothearcane我使用了你的想法。确实，更改alpha不会更改混合模式，但是有助于获得近似值