0

I have a container div with an SVG mask-image applied to it. It works just fine, the div has the "shape" of the SVG itself. When I add another element as a child, say a text one (or another div), the element is being "cut" (masked) itself. I think this is the normal behavior of the mask.

Any way to show the child element, despite the mask applied to the parent div? Possibly without using absolute positioning.

https://codepen.io/gremo/pen/vYdRjgo

.mask-wave {
  mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

mask-image example

gremo
  • 47,186
  • 75
  • 257
  • 421

1 Answers1

0

How about applying applying the background-color and the mask to .mask-wave::before and then absolute position and z-index the pseudo element behind your div. Then you can have your masked shape with background colour behind text or whatever.

Seems to be a duplicate of this How to apply a mask-image only on an element's background and not on its children?

Simp4Code
  • 1,394
  • 1
  • 2
  • 11