Css 我想在视频上使用混合混合模式的 svg

发布于02月11日

我试着用Mix-Blend-MODE:Difference把一个SVG标志放在一个视频剪辑(MP4)上；它应该在6号store 中使用.

我的css:

#gr-logo svg path { mix-blend-mode: difference; }个

我也try 了PNG，在容器上try 了混合模式等等. 我对文本做了同样的事情，它工作得很好.

在这里可以看到991像素和更小的像素. https://www.giuliaandromeo.com/staging/个

你知道为什么它不起作用吗？

谢谢汤姆

推荐答案

具有position: fixed规则的元素需要是具有mix-blend-mode规则的元素.有关堆叠环境如何影响混合模式的更多信息，请参见this answer.

因此，在您的情况下，您可以通过设置以下规则快速验证这一点:

header.header-main {
    mix-blend-mode: difference;
}
header.header-main * {
    color: white!important;
    fill: white!important;
}

作为概念证明，请注意将所有子元素设置为白色的通配符规则.这是为了使它们在背景上显示为黑色，这是由于difference混合模式的性质.显然，您应该调整现有规则，将 colored颜色设置为纯白色.

实用课程推荐