Estoy casi seguro de que esto no es posible, pero solo quería preguntar si estoy en lo cierto.

Tengo un contenedor con un color de fondo sólido y con texto. Este flota sobre una imagen. Actualmente, el color del texto es negro, pero lo que me gustaría tener es que el texto se vuelva transparente, de modo que pueda ver a través del color de fondo sy en la imagen detrás de él. Sé que esto suena imposible, así que pensé que podría lograr el mismo efecto si superponía el texto con la misma imagen pero lo enmascara de alguna manera de modo que solo las partes que cubren el texto sean visibles.

Espero que quede claro a qué me refiero. Sería feliz si alguien tuviera una idea de cómo puedo hacer esto, y si no se puede hacer, me indicará alguna evidencia de por qué no se puede hacer :)

Gracias por tu ayuda.

1
Waboodoo 7 may. 2012 a las 12:43

1 respuesta

La mejor respuesta

Hay una propiedad para los navegadores basados ​​en webkit llamada -webkit-background-clip: text. Escribe así:

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;
}​

Consulte esto http://jsfiddle.net/yvYG8/

Lea esto para obtener más información sobre http://trentwalton.com/2011/05/19/ máscara-texto-imagen /

2
sandeep 7 may. 2012 a las 13:20
El enlace es correcto, pero sugiero usar la otra opción que se explica allí: mask-image.
 – 
Paul
7 may. 2012 a las 12:58
Gracias por tu respuesta. Se ve bien, lástima que esto no funcionará en todos los navegadores. Pero es bueno saber que se puede hacer :)
 – 
Waboodoo
7 may. 2012 a las 20:17