Ancestors

Toot

Written by Anthony Sorace on 2024-12-06 at 16:17

Anyone want to help me understand something in #CSS better?

When I have text over an image and the image has a mask-image property, it seems to be affecting the text, too. Why?

An example: http://a.9srv.net/tmp/gradient

How does one fade the image while leaving the text fully opaque?

=> More informations about this toot | More toots from a@pdx.social

Descendants

Written by Christopher Kirk-Nielsen on 2024-12-06 at 16:42

@a It's a layering thing. If you add position: relative on your h1 or its container, it will allow it to be layered and since it's later in the DOM, it will be above the image. Alternatively, add to your masked image position: relative; z-index: -1; for the same result. Basically, using a mask automatically promotes the masked element to a layer, so it is above any unlayered content.

This is a (v.gross) simplification, and I don't want to spec-dive, but that's the gist of it. Hope it helps!

=> More informations about this toot | More toots from chriskirknielsen@front-end.social