Decir que tengo el siguiente código:¿Establecer imagen de fondo para el color de fuente?
<span>Hello world!</span>
Y el siguiente CSS:
span{
color:red;
}
¿Hay alguna manera de que pueda cambiar el red a una imagen? Me gusta url(images/text-bg.png);? Quiero poner una textura en mi texto y decidí que simplemente convertiría el texto en "color" en una imagen, pero no estoy seguro si esto se puede hacer con CSS.
Sí, es posible utilizando SVG, puede incrustar la imagen <svg> más de un <div> y antecedentes sobre otro <div>, luego aplique z-index a <div>. Puede usar aplicaciones vectoriales como illustrator para crear el svg de la manera que desee.
<html>
<head>
<title>Untitled Document</title>
<style>
html
{
background-image:url('lauch.jpg');
background-repeat:no-repeat;
background-position:center;
padding-top:200px;
}
</style>
</head>
<body>
<div align="center">
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="140px" height="80px" viewBox="0 0 76.25 39.167" enable-background="new 0 0 76.25 39.167" xml:space="preserve">
<text transform="matrix(1 0 0 1 5.9336 30.417)" fill="none" stroke="red" stroke-width="0.25" stroke-miterlimit="10" font-family="'Tahoma'" font-size="36">Text</text>
</div>
</body>
</html>
Esto no es posible, ni siquiera con CSS3. Aquí hay un artículo interesante sobre los efectos de texto que puede usar con CSS3.
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
Otra opción es utilizar una fuente personalizada, que adapte a sus necesidades.
Este sitio tiene una increíble cantidad de fuentes gratuitas de código abierto en todos los formatos necesarios para admitir todos los navegadores, incluso le ofrece un buen archivo de demostración para demostrar cómo implementarlo en CSS. Esto también es compatible con CSS2.1, por lo que es IE7 + compatible.
Parece que logré el mismo efecto con el ejemplo "cebra" en el enlace que me mostró. – Charlie
Desafortunadamente, ese ejemplo no pertenece a esa lista.No es CSS3, simplemente usa el reemplazo de imagen mencionado por @wex –
Sí, además el fondo debe ser del mismo color que el patrón. – Charlie
La técnica de cambiar de texto para las imágenes es común que los encabezados y la navegación de páginas, pero realmente no son ninguna técnica de CSS puros que son multi-navegador compatible (this es una buena técnica, pero ISN es algo en lo que deberías confiar).
Si usted tiene una cantidad finita de texto que desea aplicar la textura, la mejor opción es simplemente reemplazar el texto con imágenes de forma manual, como por ejemplo:
HTML:
<h1 class="title">Title</h1>
CSS:
h1.title {
background: url(images/title.gif) 0 0 no-repeat;
width: 80px;
height: 23px;
text-indent: -10000px; }
Esto es lo que quiero decir, quiero poder cambiar el texto sin tener que entrar en PS y rehacer el encabezado. – Charlie
Es cierto. Nuevamente, realmente solo recomiendo esta técnica si la está usando para una "cantidad finita de texto" y, como usted dijo, un texto que se puede esperar que sea estático. – Wex
Correcto, me pregunto si hay otras formas. – Charlie
Estoy intentando pensar si habría una manera de hacer esto utilizando la opacidad; pero no creo que exista https://developer.mozilla.org/en/CSS_Reference Mire a su alrededor los estilos de texto y de fuente disponibles y vea si hay algo para probar y obtener el efecto que está buscando sin usar una imagen. – Dave
Es posible que pueda producirlo con un poco de SVG ... – zzzzBov
posible duplicado de [¿Con css es posible usar una imagen para el color del texto?] (Http://stackoverflow.com/questions/5812236/with- css-es-es-posible-para-usar-una-imagen-para-texto-color) –