[SOLUCIONADO] Fuentes rellenas con imagen

harryelsucio · #1 (**permalink**) 25/12/2013, 19:38

Hola soy nuevo en esto del CSS así que no se que tan idiota sea esta pregunta pero he buscado y no encontré a alguien que haya intentado lo mismo, y es básicamente si es posible a través de este lenguaje de hojas de estilo asignarle a las fuentes el relleno de una imagen, desde ya me disculpo si la pregunta es muy absurda ya sea por lo facil, ya sea por lo imposible.

Saludos a todos

eamexicano · #2 (**permalink**) 25/12/2013, 21:00

Hola: No creo que se pueda con CSS pero si se puede hacer con SVG.
Tendrías que definir un patrón (donde va a estar la imágen), un texto con el mensaje y utilizar de relleno (fill) el id del patrón que definiste anteriormente.
Te dejo un ejemplo de cómo se pudiera hacer (solo lo probé con chrome - os x)
Saludos.

/* Referencia */

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
      
    <svg version="1.1" id="contenedor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="300px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve">
       <defs>
           <pattern id="imagen-fondo" patternUnits="userSpaceOnUse" width="100" height="100">
               <image xlink:href='http://blog.eamexicano.com/wp-content/uploads/2013/12/cropped-jirafa-wp.jpg' x="-100px" y="-100px" width="500px" height="300px" />
           </pattern>
       </defs>
       
    <text transform="matrix(1 0 0 1 128.2373 168.7773)" fill="url(#imagen-fondo)" stroke="#000000" font-family="'ArialMT'" font-size="72">Prueba</text>
    </svg>
 
 
</body>
</html>

pzin · #3 (**permalink**) 26/12/2013, 07:10

Con CSS se puede, y de hecho son sólo tres lineas:

Código CSS:

Ver originalcolor: transparent;
background-clip: text;
background: url(algo.jpg) repeat;

Filete:

Compatibilidad: http://www.standardista.com/css3/css...und-properties

harryelsucio · #4 (**permalink**) 26/12/2013, 08:06

Muchas gracias, era exactamente lo que necesitaba, saludos

harryelsucio · #5 (**permalink**) 26/12/2013, 11:04

Cabe señalar que eso solo funciona en chrome

jonni09lo · #6 (**permalink**) 26/12/2013, 11:07

Usaste los prefijos de cada navegador? Si hubieses revisado el ejemplo que te paso @pzin hubieras visto todo el código

Saludos