css Question posted in
Some basic documentation can be found here.

Css – Where is the white background coming from when using mix-blend-mode?

body {
  background: #060f11;
}
<div style="position:relative;z-index:0">
  <div style="background:#060f11">
    <div style="background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), url(&quot;data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E&quot;);filter:contrast(200%) brightness(1000%) invert(100%);height:200px;mix-blend-mode:multiply;position:relative;transform:rotateZ(45deg);width:200px"></div>
  </div>
</div>

I don’t understand where the white edges are coming from and how to get rid off them?

enter image description here

Appears to be caused by z-index on the parent, but why?

Tags:

2

Answers


  1. 0

    Prior to the response, I apologize if the comments felt curt due to lack of English.

    Where is the white background coming from when using mix-blend-mode?

    • The above question seems to be asking why the white color occurs, so I answered it in the comments.

    the question that appears to have been and disappeared by the z-index

    Check for stacking context when using css filter or opacity.

    In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others

    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/?source=post_page—–172f9bd1af8b——————————–

    Login or Signup to reply.
  2. 0

    Your innermost <div> is rotated and has mix-blend-mode: multiply applied. So the question is: what is it going to multiply with? And the answer is: anything below it in the same stacking context.

    As the spec says,

    This group must then be blended and composited with the stacking context that contains the element.

    So, let’s suppose you don’t set z-index on the outer element. That means it can composite with the root stacking context. Since the filter() is turning the fancy background of your inner element white, multiplying the dark page background by white (unity) results in the same color as the dark background. Since the output is the same color as the background, you can’t see it.

    But adding z-index on a parent element between your fancy element and the background creates a new stacking context. (You can demonstrate this because you get the same result by getting rid of z-index and setting isolation: isolate on that parent.) Now, the white of the rotated element has nothing to blend with outside of the stacking context created by the middle div. Since it has nothing to blend with, it just outputs the source color — white.

    As others have said, the way to prevent this is to stop the rotated element from poking out of its parent in the first place by setting overflow: hidden on one of the parents.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search