Home/ Questions/Q 7914849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T14:15:21+00:00

I’m almost sure this is not possible, but just wanted to ask if I’m

  • 0

I’m almost sure this is not possible, but just wanted to ask if I’m correct.

I have a container with a solid background color and with text in it. This floats over an image. Currently, the text color is black, but what I’d like to have is that the text becomes transparent, such that I can see through the s background color and onto the image behind it. I know this sounds impossible, so I thought that I could achieve the same effect if I overlay the text with the same image but mask it somehow such that only the parts covering the text are visible.

I hope it is clear what I mean. I would be happy if someone had an idea how I could do this, and if it can’t be done, point me to some evidence why it can’t be done 🙂

Thanks for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is an property in for webkit based browsers called -webkit-background-clip: text. Write like this:

    p{
    background-image:;
    background:  url(http://2.bp.blogspot.com/-NSwhl6hv41Y/Th5EIJL_zZI/AAAAAAAAFc4/UGUNfb--tGc/s1600/vector_wallpaper_by_seppoftw.jpg);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-size:100px;
    margin:40px;
}​

    Check this http://jsfiddle.net/yvYG8/

    Read this for more http://trentwalton.com/2011/05/19/mask-image-text/

    • 0