css text clipping / masking?

Asked Apr 03 '14 at 15:07

Active Apr 03 '14 at 15:07

Viewed 433 times

I am putting together an idea for a site with scrollable background images, on top there is a white menu div with text in it. If possible i would like to have the text completely see through so that it almost looks like it has cut the text from the white div to show the images.

i know of the css rule:

background-clip: text

but i don't think this wont solve my problem as my images are not the background for the div the text is in. Is there any workaround without using svg or png.

thanks :)

asked Apr 03 '14 at 15:07

Jonathan Bunday

JSfiddle please but basically unless the images are in the bg of the div I think you are out of luck. – Paulie_D Apr 03 '14 at 15:09
background-clip works with chrome at this time, look at SVG , it can be done, png will provide an image , wich is fine if you fill the Alt attribute :) – G-Cyrillus Apr 03 '14 at 15:09
Seems like this might be part of your answer: http://stackoverflow.com/questions/9082909/cut-out-text-in-css-possible – Two-Bit Alchemist Apr 03 '14 at 15:11
Yeah thanks guys, it looks like my only option is svg :( – Jonathan Bunday Apr 03 '14 at 15:49

css text clipping / masking?

0 Answers0