[css-backgrounds-4] Possible `background-clip` value to punch holes in the background layer in the shape of font charatcters

[jsnkuhn]

A background-clip value to punch holes in the background-color/background-image in the shape of font characters as seen below:

possible value name?:

text-cut text-punch mask-text knockout-text (photoshop term)

This is doable right now in CSS with mix-blend-mode but has a limitation where the background must be white or black. https://www.w3schools.com/howto/howto_css_cutout_text.asp

Other methods to do this now can be found on this Stack Overflow question with 119k views over almost 12 years. That's an average of 27 views per day:

Transparent text cut out of background https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background

Knockout option in Photoshop: https://helpx.adobe.com/photoshop/using/knockout-reveal-content-layers.html

[Loirooriol]

10696 introduces the union of border-area and text, and also mentions the idea of doing intersections.

I guess what this would need is the intersection of content-box/padding-box/border-box with the complementary of text.

[jsnkuhn]

Is the idea then something more like a mask-composite but for background-clip? What other combinations would be of value?

I feel like a simple keyword for this would more straight forward for devs.

[Loirooriol]

It could be a keyword that represents the intersection of border-box with the complementary of text (just like border-area is the intersection of border-box with the complementary of padding-area). And then have some way to intersect that with padding-box, content-box, or even border-area.