Tengo un lindo fondo en mi página, y quiero que mi encabezado de texto actúe como una máscara para cortar a través de su div y tener el fondo como una textura. ¿Puedo hacer esto en CSS o tengo que abrir Photoshop?CSS: ¿Puedo usar texto como máscara para que la imagen de fondo se muestre solo dentro del texto?
soporte de los navegadores limitada, pero background-clip puede conseguir que este efecto: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit los botones Animar de más diversión)
Uso de SVG puede hacerlo de esta manera: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (Ver fuente para ver lo que se hace, reference article ver también)
Usando una imagen de fondo y después CSS, usted puede hacer esto: http://www.netmagazine.com/tutorials/texturise-web-type-css
hay una propiedad background-clip: text en CSS3, a pesar de que no funciona en todos los navegadores. Vea here para más detalles.
como CSS-trucos muestra en este article, 'imagen detrás del texto' se puede hacer como tal:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Pero no se garantiza que funcione en todos los navegadores, por lo que sugieren unos arounds de trabajo , como modernizr.
Esto es lo que parece cuando funciona:
puede que tenga que abrir Photoshop sólo para mostrarnos lo que el resultado final debe ser similar :) –