Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/12/2013, 21:00
eamexicano
 
Fecha de Ingreso: marzo-2013
Mensajes: 11
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Fuentes rellenas con imagen

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
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8">
  3. </head>
  4.      
  5.     <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"
  6.          width="500px" height="300px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve">
  7.        <defs>
  8.            <pattern id="imagen-fondo" patternUnits="userSpaceOnUse" width="100" height="100">
  9.                <image xlink:href='http://blog.eamexicano.com/wp-content/uploads/2013/12/cropped-jirafa-wp.jpg' x="-100px" y="-100px" width="500px" height="300px" />
  10.            </pattern>
  11.        </defs>
  12.        
  13.     <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>
  14.     </svg>
  15.  
  16.  
  17. </body>
  18. </html>