2

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

Thomas Högg
  • 23
  • 2

1 Answers1

2

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.

dneustadt
  • 12,015
  • 1
  • 12
  • 18
  • Thanks, that works - and thank you for the link with the backgorund information :) – Thomas Högg Feb 13 '23 at 08:49
  • Hm, the proof of concept worked well... but I can't use it like here from top on, there are to many sibling I can't get filled right or got visible after that... if it would be possible to set the mixed-blend-mode to normal for single objects or unset the fill and color I could manage it, but that didn't work... I tried to set it "later" at #emz-header-logo and also set position: fixed it doesn't work anymore... Is there a way to open up a new stack for example somehow? – Thomas Högg Feb 13 '23 at 17:13
  • A workaround could be to keep `mix-blend-mode` on the parent and use a filter to invert the child `.emz-sticky-header { filter: invert(1); }`. Then you could use the `:hover` pseudo selector on the parent to both unset the blend mode and filter, if you don't want the effect when the flyout menu is open. – dneustadt Feb 13 '23 at 17:50