wake-up-neo.com

Transparenter Text aus dem Hintergrund geschnitten

Gibt es eine Möglichkeit, einen transparenten Text aus einem Hintergrund -Effekt wie dem folgenden mit CSS herauszuschneiden?
Es wäre traurig, alle wertvollen SEOs zu verlieren, weil Bilder Text ersetzen.

Transparent text cut out of background

Ich dachte zuerst an Schatten, aber ich kann nichts herausfinden ... 

Das Bild ist der Hintergrund der Site, ein absolut positioniertes <img>-Tag 

csscss3svgfontscss-shapes
77
Love Dager

Mit css3 ist dies möglich, wird jedoch nicht in allen Browsern unterstützt

Mit Hintergrund-Clip: Text; Sie können einen Hintergrund für den Text verwenden, müssen ihn jedoch an den Hintergrund der Seite anpassen

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

Automatische Ausrichtung

mit einem kleinen Javascript können Sie den Hintergrund automatisch ausrichten:

$(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>
http://jsfiddle.net/JGPuZ/1336/

43
Gijs

Obwohl dies mit CSS möglich ist, wäre ein besserer Ansatz die Verwendung einer Inline-SVG mit SVG-Maskierung . Dieser Ansatz hat gegenüber CSS einige Vorteile:

  • Viel bessere Browserunterstützung: IE10 +, Chrome, Firefox, Safari ...
  • Dies hat keinen Einfluss auf die Suchmaschinenoptimierung, da Spider SVG-Inhalte crawlen können ( google indexiert SVG-Inhalte seit 2010 ).

CodePen Demo: SVG-Textmaske

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>

Wenn Sie den Text auswählbar und durchsuchbar machen möchten, müssen Sie ihn außerhalb des <defs>-Tags einfügen. Das folgende Beispiel zeigt eine Möglichkeit, den transparenten Text mit dem Tag <use> zu erhalten:

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>

45
web-tiki

Eine Möglichkeit, die mit den meisten modernen Browsern (außer Edge), obwohl nur mit schwarzem Hintergrund, funktioniert, ist die Verwendung von

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

in Ihrem Textelement und legen Sie den gewünschten Hintergrund dahinter. Multipliziert grundsätzlich den 0-255-Farbcode auf 0-1 und multipliziert diesen mit dem, was sich dahinter befindet. Schwarz und Weiß bleiben also mit 1 multipliziert und werden effektiv transparent . http://codepen.io/nic_klaassen/full/adKqWX /

16
Nic

Es ist is möglich, aber bisher nur mit Webkit-basierten Browsern (Chrome, Safari, Rockmelt, alles basierend auf dem Chromium-Projekt). 

Der Trick besteht darin, ein Element innerhalb des weißen Elements zu haben, das den gleichen Hintergrund wie der Körper hat. Dann verwenden Sie -webkit- background-clip: text; für das innere Element. Dies bedeutet im Grunde "den Hintergrund nicht über den Text hinaus erweitern" und transparenten Text verwenden.

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
Kyle

Ich denke, Sie könnten so etwas erreichen mit background-clip , aber ich habe das noch nicht getestet. 

Siehe dieses Beispiel:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Nur Webkit, ich weiß noch nicht, wie ich den schwarzen Hintergrund in einen weißen Hintergrund ändern kann.)

2
feeela

Ich habe gerade einen neuen Weg gefunden, dies zu tun, während ich herumgespielt habe. Ich bin nicht ganz sicher, wie es funktioniert (wenn jemand anderes es erklären möchte, tun Sie das bitte).

Es scheint sehr gut zu funktionieren und erfordert keine doppelten Hintergründe oder JavaScript.

Hier ist der Code: 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>

1
chbchb55

 Demo Screenshot

Ich musste einen Text erstellen, der genau so aussah wie im ursprünglichen Beitrag, aber ich konnte ihn nicht einfach fälschen, indem er Hintergründe aneinander reihte, da hinter dem Element eine Animation ist. Bisher scheint das noch niemand vorgeschlagen zu haben, also habe ich folgendes getan: (Es wurde versucht, das Lesen so einfach wie möglich zu machen.)

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

Wirf das einfach in dein Fenster. Lade jetzt den Hintergrund des Körpers auf dein Bild und beobachte die Magie!

1
Pecacheu

Sie können eine invertierte/negative/umgekehrte Schriftart verwenden und diese mit der font-face="…"-CSS-Regel anwenden. Möglicherweise müssen Sie mit dem Buchstabenabstand spielen, um kleine weiße Lücken zwischen den Buchstaben zu vermeiden.

Wenn Sie keine bestimmte Schriftart benötigen, ist das ganz einfach. Laden Sie eine sympathische Version herunter, zum Beispiel aus dieser Sammlung invertierter Schriftarten .

Wenn Sie eine bestimmte Schriftart benötigen (z. B. "Open Sans"), ist dies schwierig. Sie müssen Ihre vorhandene Schriftart in eine invertierte Version konvertieren. Dies ist manuell mit Font Creator, FontForge usw. möglich, aber wir möchten natürlich eine automatisierte Lösung. Ich konnte noch keine Anleitung dafür finden, aber ein paar Hinweise:

1
tanius

Sie können das Patternizer jQuery-Plugin von myadzel verwenden, um diesen Effekt in allen Browsern zu erzielen. Derzeit gibt es keine Browser-übergreifende Möglichkeit, dies nur mit CSS zu tun.

Sie verwenden Patternizer, indem Sie class="background-clip" zu HTML-Elementen hinzufügen, in denen der Text als Bildmuster gezeichnet werden soll, und das Bild in einem zusätzlichen data-pattern="…"-Attribut angeben. Siehe die Quelle der demo . Der Patternizer erstellt ein SVG-Bild mit mit Muster gefülltem Text und unterlegt es dem transparent gerenderten HTML-Element.

Wenn, wie im Beispielbild der Frage, das Textfüllmuster Teil eines Hintergrundbilds sein sollte, das über das Element "Muster" hinausgeht, sehe ich zwei Optionen (ungetestet, mein Favorit zuerst):

  • Verwenden Sie im SVG anstelle eines Hintergrundbildes Maskierung. Wie in web-tikis Antwort , zu der der Patternizer immer noch die automatische Generierung des SVG und ein unsichtbares HTML-Element hinzufügt, das die Auswahl und das Kopieren von Text ermöglicht.
  • Oder verwenden Sie die automatische Ausrichtung des Musterbildes. Kann mit JavaScript-Code erfolgen, der dem in Gijs Antwort ähnelt.
1
tanius

lege einfach dieses 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
Rashed

Mit CSS jetzt nicht möglich, habe ich Angst.

Am besten verwenden Sie einfach ein Bild (wahrscheinlich eine PNG-Datei) und platzieren Sie einen guten Alt-/Titeltext darauf.

Alternativ können Sie ein SPAN oder ein DIV verwenden und das Bild als Hintergrund für Ihren Text verwenden, den Sie zu SEO-Zwecken verwenden möchten, aber den Text außerhalb des Bildschirms einrücken.

0
Billy Moat