Transparent text inside non-transparent div

Question

I have a background image, and a white div on top of it. I want to have text inside that div that is transparent, so that you can see "through" to the background image. Is that at all possible?

Should look something like this:

You can get close but it seems like it's a webkit only solution: http://jsfiddle.net/j08691/pHCsF/. You may be better off just creating the full image. — j08691, Aug 30 '13 at 01:48

score 2 · Accepted Answer · answered Aug 30 '13 at 01:50

2

You need to use this for your text in CSS

-webkit-text-fill-color: transparent;

answered Aug 30 '13 at 01:50

Brian

4,958
8
40
56

score 1 · Answer 2 · answered Aug 30 '13 at 01:35

1

Use the following CSS property on your white div to make the underlying image show through.

background: rgba(255, 255, 255, 0.6);

answered Aug 30 '13 at 01:35

Babak Naffas

12,395
3
34
49

1

No, the div should be opaque, but the text transparent. – Moriz Büsing Aug 30 '13 at 01:37

score 0 · Answer 3 · answered Dec 25 '14 at 12:35

0

Instead of text, just use a GIF image that has pixel "wholes" (text has no pixels, pixels surround it). That is probably a solution with highest compatibility.

answered Dec 25 '14 at 12:35

Andrej Ilic

81
7

Transparent text inside non-transparent div

3 Answers3

Linked