Texto transparente cortado de fondo

¿Hay alguna manera de hacer un texto transparente recortado de un efecto de fondo como el de la siguiente imagen, con CSS?
Sería triste perder todo el precioso SEO debido a las imágenes que reemplazan el texto.

Texto transparente cortado de fondo

Primero pensé en sombras pero no puedo entender nada …

La imagen es el fondo del sitio, una etiqueta posición absoluta

Es posible con css3 pero no es compatible con todos los navegadores

Con fondo-clip: texto; puede usar un fondo para el texto, pero deberá alinearlo con el fondo de la página

 body { background: url(http://www.color-hex.com/palettes/26323.png) repeat; margin:10px; } h1 { background-color:#fff; overflow:hidden; display:inline-block; padding:10px; font-weight:bold; font-family:arial; color:transparent; font-size:200px; }span { background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat; -webkit-text-fill-color: transparent; -webkit-background-clip: text; display:block; } 
 

ABCDEFGHIKJ

Aunque esto es posible con CSS, un mejor enfoque sería usar un SVG en línea con máscara SVG . Este enfoque tiene algunas ventajas sobre CSS:

  • Mucho mejor soporte para navegadores : IE10 +, Chrome, Firefox, safari …
  • Esto no afecta el SEO ya que las arañas pueden rastrear contenido SVG ( google indexa el contenido SVG desde 2010 )

Demo de CodePen: máscara de texto SVG

Fondo transparente de recorte de texto

 body,html{height:100%;margin:0;padding:0;} body{ background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg'); background-size:cover; background-attachment:fixed; } svg{width:100%;} 
     SVG Text mask     

Una manera que funciona en la mayoría de los navegadores modernos (excepto por ejemplo, el borde), aunque solo con un fondo negro, es usar

 background: black; color: white; mix-blend-mode: multiply; 

en su elemento de texto y luego coloque el fondo que desee detrás de eso. Multiplicar básicamente mapea el código de color de 0-255 a 0-1 y luego lo multiplica por lo que está detrás, de modo que el negro se queda en blanco y negro se multiplica por 1 y se vuelve transparente. http://codepen.io/nic_klaassen/full/adKqWX/

Es posible, pero hasta ahora solo con navegadores basados ​​en Webkit (Chrome, Safari, Rockmelt, cualquier cosa basada en el proyecto Chromium).

El truco es tener un elemento dentro del blanco que tenga el mismo fondo que el cuerpo, luego use -webkit- background-clip: text; en el elemento interno que básicamente significa “no extender el fondo más allá del texto” y utilizar texto transparente.

 section { background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg); width: 100%; height: 300px; } div { background: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 0); width: 60%; heighT: 80%; margin: 0 auto; font-size: 60px; text-align: center; } p { background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg); -webkit-background-clip: text; }​ 

http://jsfiddle.net/BWRsA/

Supongo que podrías lograr algo así usando background-clip , pero aún no lo he probado.

Mira este ejemplo:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Solo Webkit, todavía no sé cómo cambiar el fondo negro por uno blanco)

Puede usar una fuente invertida / negativa / inversa y aplicarla con la regla font-face="…" CSS. Puede que tenga que jugar con espacios entre letras para evitar pequeños espacios en blanco entre las letras.

Si no necesita una fuente específica, es simple. Descargue uno agradable, por ejemplo de esta colección de fonts invertidas .

Si necesita una fuente específica (por ejemplo, “Open Sans”), es difícil. Tienes que convertir tu fuente existente en una versión invertida. Esto es posible de forma manual con Font Creator, FontForge, etc., pero, por supuesto, queremos una solución automatizada. No pude encontrar instrucciones para eso todavía, pero algunos consejos:

  • Cómo convertir una fuente de bitmap en una fuente TrueType (además de otra forma de hacerlo). En primer lugar, se utilizarían los comandos de ImageMagick para convertir los glifos de fonts en imágenes ráster de alta resolución y para invertirlas, y luego convertirlas de nuevo a una fuente TrueType con las instrucciones anteriores.
  • ¿Es posible invertir una fuente con FontForge u otra PGM?
  • Crear una fuente inversa (blanco sobre negro)

Puede usar el plugin jQuery Patternizer de myadzel para lograr este efecto en todos los navegadores. En este momento, no hay una forma de navegador cruzado para hacer esto solo con CSS.

Utiliza Patternizer agregando class="background-clip" a los elementos HTML donde desea que el texto se dibuje como un patrón de imagen, y especifique la imagen en un atributo de data-pattern="…" adicional data-pattern="…" . Ver la fuente de la demostración . Patternizer creará una imagen SVG con texto relleno de patrón y lo subirá al elemento HTML renderizado de forma transparente.

Si, como en la imagen de ejemplo de la pregunta, el patrón de relleno de texto debe ser parte de una imagen de fondo que se extiende más allá del elemento “patrón”, veo dos opciones (sin probar, mi favorito primero):

  • Use enmascaramiento en lugar de una imagen de fondo en SVG. Como en la respuesta de web-tiki , a la que usar Patternizer todavía se agregará la generación automática de SVG y un elemento HTML invisible en la parte superior que permite la selección y copia de texto.
  • O use la alineación automática de la imagen del patrón. Se puede hacer con un código JavaScript similar al de la respuesta de Gijs .

Demo Captura de pantalla

Necesitaba hacer un texto que se viera exactamente como en la publicación original, pero no podía simplemente falsificarlo alineando fondos, porque hay algo de animación detrás del elemento. Nadie parece haber sugerido esto todavía, así que esto es lo que hice: (Probé para que sea tan fácil de leer como sea posible).

 var el = document.body; //Parent Element. Text is centered inside. var mainText = "THIS IS THE FIRST LINE"; //Header Text. var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text. var fontF = "Roboto, Arial"; //Font to use. var mSize = 42; //Text size. //Centered text display: var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox), ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff"; ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400; //Generate subtext SVG for knockout effect: txtSub.innerHTML = ""+ ""+ ""+ ""+ ""+subText+""+ ""+ ""; //Relevant Helper Functions: function centeredDiv(parent) { //Container: var d = document.createElement('div'), s = d.style; s.display = "table"; s.position = "relative"; s.zIndex = 999; s.top = s.left = 0; s.width = s.height = "100%"; //Content Box: var k = document.createElement('div'), j = k.style; j.display = "table-cell"; j.verticalAlign = "middle"; j.textAlign = "center"; d.appendChild(k); parent.appendChild(d); return k; } function mkDiv(parent, tCont) { var d = document.createElement('div'); if(tCont) d.textContent = tCont; parent.appendChild(d); return d; } function textWidth(text, font, size) { var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")), context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font; return context.measureText(text).width; } 

Solo échalo en tu ventana. Descarga, establece el fondo del cuerpo en tu imagen y observa cómo sucede la magia.

No es posible con CSS ahora mismo, me temo.

Su mejor opción es simplemente usar una imagen (probablemente un PNG) y colocar un buen texto alt / título en ella.

De forma alternativa, puede usar un SPAN o un DIV y tener la imagen como fondo de eso con el texto que desea para fines de SEO dentro de él, pero con texto insertado fuera de la pantalla.

solo pon ese css

  .banner-sale-1 .title-box .title-overlay { font-weight: 900; overflow: hidden; margin: 0; padding-right: 10%; padding-left: 10%; text-transform: uppercase; color: #080404; background-color: rgba(255, 255, 255, .85); /* that css is the main think (mix-blend-mode: lighten;)*/ mix-blend-mode: lighten; } 

Acabo de descubrir una nueva forma de hacerlo mientras me equivoco, no estoy del todo seguro de cómo funciona (si alguien más quiere explicarlo, por favor hazlo).

Parece que funciona muy bien y no requiere fondos dobles o JavaScript.

Aquí está el código: JSFIDDLE

 body { padding: 0; margin: 0; } div { background: url(http://www.color-hex.com/palettes/26323.png) repeat; width: 100vw; height: 100vh; } body::before { content: '$ALPHABET'; left: 0; top: 0; position: absolute; color: #222; background-color: #fff; padding: 1rem; font-family: Arial; z-index: 1; mix-blend-mode: screen; font-weight: 800; font-size: 3rem; letter-spacing: 1rem; }