Pregunta Texto transparente cortado de fondo


¿Hay alguna manera de hacer un texto transparente cortado de un fondo efecto 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.

Transparent text cut out of background

Primero pensé en sombras pero no puedo entender nada ...

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


74
2017-12-18 12:24


origen


Respuestas:


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;
}
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1/

Alineación automática

con un poco de javascript puedes alinear el fondo automático:

$(document).ready(function(){
  var position = $("h1").position(); //Position of the header in the webpage
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>
1. http://jsfiddle.net/JGPuZ/2/


38
2017-12-18 12:49



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:

Demo de CodePen: Máscara de texto SVG

transparent text clipping background

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 viewbox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>

Si su objetivo es hacer que el texto se pueda seleccionar y buscar, debe incluirlo fuera del <defs> etiqueta. El siguiente ejemplo muestra una manera de hacerlo manteniendo el texto transparente con el <use> etiqueta:

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 viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>


42
2018-04-20 12:18



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/


14
2018-01-30 22:27



Eso 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 usar -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/


3
2017-12-18 12:37



Creo que podrías lograr algo así utilizando 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)


2
2017-12-18 12:37



Puedes usar una fuente invertida / negativa / inversa y aplicarlo con el font-face="…" Regla de 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 este colección de fuentes 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:


1
2017-10-17 15:23



Puedes usar myadzel's Patrón plugin jQuery para lograr este efecto en todos los navegadores. En este momento, no hay una forma de navegador cruzado para hacer esto solo con CSS.

Usas Patternizer agregando class="background-clip" a los elementos HTML donde desea que el texto se pinte como un patrón de imagen, y especifique la imagen en un data-pattern="…" atributo. Ver la fuente del manifestació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 lo cual, si utiliza Patternizer, aún 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 código JavaScript similar al de La respuesta de Gijs.

1
2017-10-17 15:05



Demo Screenshot

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 =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
    "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
    "<mask id='txtSubMask'>"+
        "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
        "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
    "</mask>"+
"</svg>";

//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.


1
2017-11-23 08:34



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.


0
2017-12-18 12:27



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;

    }

0
2017-09-22 06:29



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;
}
<div></div>


0
2018-01-10 06:30