imagen - texto opaco sobre fondo semitransparente con css
Texto transparente cortado de fondo (11)
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>
¿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.
Primero pensé en sombras pero no puedo entender nada ...
La imagen es el fondo del sitio, una etiqueta <img> posición absoluta
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
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 de la etiqueta <defs> . El siguiente ejemplo muestra una forma de hacerlo manteniendo el texto transparente con la etiqueta <use> :
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>
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>
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>
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;
}
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.
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)
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/
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;
}
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.
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 demo . 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 share , 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 share .
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 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:
- Cómo convertir una fuente de mapa de bits 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 fuentes 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)