csshtml5-videoshopware6mix-blend-mode

I wand to use a svg with moxe-blend-mode over a video

I try to put a svg logo over a video clip (mp4) with mix-blend-mode: difference; It should be used in shopware 6.

My css:

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

I also tried png, tried the blend mode on containers and so on... The same thing I did with text and it works fine.

It can bee seen here at 991px and smaller. https://www.giuliaandromeo.com/staging/

Any idea, why it does not work?

Thanks Tom

Solution

  • The element that has the position: fixed rule needs to be the one element with the mix-blend-mode rule. See this answer for more insight on how the stacking context influences the blend mode.

    So in your case you can quickly verify this by setting these rules:

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

    Just as a proof of concept, note the wildcard rule that sets all the child elements to be white in color. This is to make them appear black on the background, due to nature of the difference blend mode. Obviously you should adapt the existing rules to set the color to be pure white instead.