Gibt es eine Möglichkeit , mit CSS einen transparenten Text aus einem Hintergrundeffekt wie dem im folgenden Bild herauszuschneiden ?
Es wäre traurig, alle wertvollen SEOs zu verlieren, weil Bilder Text ersetzen.
Ich habe zuerst an Schatten gedacht, aber ich kann nichts herausfinden ...
Das Bild ist der Site-Hintergrund, ein absolut positioniertes <img>
Tag
css
svg
fonts
css-shapes
Liebes-Dager
quelle
quelle
<h1><img alt="Some Text" /></h1>
es weniger SEO-freundlich ist als<h1>Some Text</h1>
. Traditionell bestand das Problem bei Bildern darin, dass sie gerade ohne unterstützendes Markup auf der Seite abgelegt wurden.Antworten:
Es ist mit CSS3 möglich, wird aber nicht in allen Browsern unterstützt
Mit Hintergrundclip: Text; Sie können einen Hintergrund für den Text verwenden, müssen ihn jedoch am Hintergrund der Seite ausrichten
http://jsfiddle.net/JGPuZ/1337/
Automatische Ausrichtung
Mit ein wenig Javascript können Sie den Hintergrund automatisch ausrichten:
http://jsfiddle.net/JGPuZ/1336/
quelle
background-clip:text
eine reine Webkit-Option, die nicht dem Standard entspricht. CSS3 lässt dentext
Wert für dieses Attribut nicht zu ( siehe ).Obwohl dies mit CSS möglich ist, wäre ein besserer Ansatz die Verwendung eines Inline-SVG mit SVG-Maskierung . Dieser Ansatz hat einige Vorteile gegenüber CSS:
CodePen Demo: SVG- Textmaske
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<use>
Tag beizubehalten:quelle
<text>
Außenseite des<defs>
Teils einbeziehen. (Übrigens bin ich mir nicht sicher, wie SE-Crawler mit SVG-Inhalten in Defs umgehen). Hier ist ein Weg, um zu halten, was OP will, mit einem schrecklichen FF-Bug-Exploit: jsfiddle.net/tfneqxxbEine Möglichkeit, die in den meisten modernen Browsern (außer Edge) funktioniert, obwohl nur mit schwarzem Hintergrund, ist die Verwendung
in Ihr Textelement und setzen Sie dann den gewünschten Hintergrund dahinter. Multiplizieren ordnet den 0-255-Farbcode grundsätzlich 0-1 zu und multipliziert diesen dann mit dem dahinter stehenden Wert. Schwarz bleibt also schwarz und Weiß multipliziert mit 1 und wird effektiv transparent. http://codepen.io/nic_klaassen/full/adKqWX/
quelle
color-dodge
,lighten
oderscreen
aufmix-blend-mode
Es ist möglich, aber bisher nur mit Webkit-basierten Browsern (Chrome, Safari, Rockmelt, alles, was auf dem Chromium-Projekt basiert.)
Der Trick besteht darin, ein Element innerhalb des weißen Elements zu haben, das denselben Hintergrund wie der Körper hat, und es dann
-webkit- background-clip: text;
für das innere Element zu verwenden, was im Grunde bedeutet, dass der Hintergrund nicht über den Text hinaus erweitert wird, und transparenten Text zu verwenden.http://jsfiddle.net/BWRsA/
quelle
Ich denke, Sie könnten so etwas mit erreichen
background-clip
, aber das habe ich 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 ändern kann)
quelle
Ich habe gerade einen neuen Weg gefunden, dies zu tun, während ich herumgespielt habe. Ich bin mir nicht ganz sicher, wie es funktioniert (wenn jemand anderes es erklären möchte, bitte tun Sie es).
Es scheint sehr gut zu funktionieren und erfordert keine doppelten Hintergründe oder JavaScript.
Hier ist der Code: JSFIDDLE
quelle
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 dies einfach. Laden Sie eine sympathische Schrift 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 wollen natürlich eine automatisierte Lösung. Ich konnte noch keine Anleitung dafür finden, aber einige Hinweise:
quelle
Sie können das jQuery-Plugin Patternizer 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"
HTML-Elemente hinzufügen, in denen der Text als Bildmuster gezeichnet werden soll, und das Bild in einem zusätzlichendata-pattern="…"
Attribut angeben . Siehe die Quelle der Demo . Patternizer erstellt ein SVG-Bild mit mustergefülltem Text und legt es dem transparent gerenderten HTML-Element unter.Wenn das Textfüllmuster wie im Beispielbild der Frage Teil eines Hintergrundbilds sein sollte, das über das "gemusterte" Element hinausgeht, sehe ich zwei Optionen (ungetestet, mein Favorit zuerst):
quelle
Setzen Sie einfach das CSS
quelle
Ich musste Text erstellen, der genau so aussah wie im ursprünglichen Beitrag, aber ich konnte ihn nicht einfach vortäuschen, indem ich Hintergründe ausrichtete, da sich hinter dem Element eine Animation befindet. Bisher scheint dies noch niemand vorgeschlagen zu haben. Deshalb habe ich Folgendes getan: (Ich habe versucht, das Lesen so einfach wie möglich zu gestalten.)
Werfen Sie das einfach in Ihr Fenster. Laden Sie es ein, stellen Sie den Hintergrund des Körpers auf Ihr Bild ein und beobachten Sie, wie die Magie geschieht!
quelle
Mit CSS momentan leider nicht möglich.
Am besten verwenden Sie einfach ein Bild (wahrscheinlich ein PNG) und platzieren 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 für SEO-Zwecke verwenden möchten, aber außerhalb des Bildschirms einrücken.
quelle