Question

So, i was coding something and idea comed to my mind. I couldn't get to the bottom of it, and figure out how to do it, so I'm hoping someone else is also interested. :)

Is it possible to do a Track matte (like in after effects) in CSS with text. So cut text of a div to see background of the bottom div. Like this:

text track matted

Is it even possible to do it only with code, without using images. So, thanks, best regards.

Was it helpful?

Solution

Yep but only for webkits

Interesting is also:
http://www.hongkiat.com/blog/css-masking/

.backgroundclip h1 {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background: url(http://bit.ly/1hRsB2d) no-repeat;
}

h1 {
  color: red;
}

Demo (as is in comment) on:
http://css-tricks.com/examples/ImageUnderText/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top