mix-blend-mode: multiply; + backdrop-filter: blur 에러

 

 

 

 

 

mix-blend-mode: multiply;

위와 같이 정의된 블렌드모드 레이어A 아래 블렌드 없는 레이어B가 위치할 경우 fixed되어 A, B 레이어 위에 위치된 레이어의 blur 필터는 B레이어의  텍스트, svg 라인에 블러어 적용이 되지 않는 에러가 발생

background: hsla(0deg, 0%, 100%, 0.3);

backdrop-filter: blur(10px) saturate(150%);

 

-> text나 svg 라인포함한 엘리먼트에 배경칼라 추가하면 블러어 제대로 작동 - white여도 무관 / html이나 body에 배경칼라 넣어도 교정됨