Ein Textporträt mit CSS erstellen?
Das Hinzufügen von Stil zu Ihrer Website ist der wichtigste Teil beim Erstellen einer Website, da es als Anziehungspunkt für Benutzer dient, wenn diese Ihre Website zum ersten Mal besuchen. Mit CSS können wir viele Arten von Designs und interaktiven Erlebnissen erstellen. Textporträts können mit Illustrator oder Photoshop erstellt werden, um das Design attraktiver zu gestalten.
In diesem Artikel werfen wir einen Blick darauf, wie wir mithilfe von CSS und einigen JavaScript-Funktionen ein Textporträt generieren und erstellen können, um unser Textporträt zu erhalten.
Erstellen des Textporträts
Ein Textporträt ist ein Bild, das aussieht, als ob sich darauf Text befände, und am Ende das Aussehen eines Objekts oder einer Person darstellt. Wir werden CSS verwenden, um dieses Textporträt zu implementieren. Lassen Sie uns über die Methoden sprechen, die wir für Textporträts verwenden werden.
Hier sind die Schritte, die wir beim Erstellen eines Textporträts befolgen:
Schritt 1 – Wir beginnen mit der Erstellung eines Dokuments mit dem erforderlichen Text, den Sie hinzufügen möchten. Angenommen, wir fügen den Text „Hallo“ hinzu und wiederholen das Wort mit der Funktion „repeat()“ von JavaScript.
Schritt 2 − Als Zweites werden wir den Hintergrund ansprechender gestalten, indem wir seine Farbe auf Schwarz setzen und außerdem das Hintergrundbild mithilfe der URL-Funktion festlegen. Wir werden die Eigenschaft „Hintergrundwiederholung“ verwenden Setzen Sie den Wert auf „keine Wiederholung“, damit das Bild nicht wiederholt wird.
Schritt 3 − Jetzt drucken wir unseren Text in das Bild, schneiden also den Text aus und fügen andere Eigenschaften hinzu, z. B. Schriftart ändern, Größe ändern usw.
Für die Verwendung der JavaScript-Wiederholungsfunktion.
Grammatik
Werfen wir einen Blick auf die Syntax der Javascript-Wiederholungsfunktion.
string.repeat(count);
Die in der Syntax verwendete Variable count ist ein Wert, der der Funktion mitteilt, wie oft die gegebene Zeichenfolge wiederholt werden soll. Die Anzahl reicht von 0 bis unendlich.
Beispiel
Um dies besser zu verstehen, schauen wir uns ein Beispiel für die Erstellung eines Textporträts mit CSS an.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of a text-potrait using CSS</title>
<style>
p{
background: url(
"https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387_960_720.png");
-webkit-background-clip: text;
line-height: 16px;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
line-height: 16px;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 76vh;
}
body {
overflow: hidden;
background: rgb(236, 236, 236);
font-family: "Segoe UI", sans;
}
h1{
text-align: center;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<h1 id="Welcome-to-tutorial-s-point"> Welcome to tutorial's point </h1>
<h2 id="This-is-an-Example-of-a-text-portrait">This is an Example of a text portrait </h2>
<p id="repeat"></p>
<script>
let str = "Yellow Car ";
document.getElementById("repeat").innerHTML = str.repeat(487);
</script>
</body>
</html>
Im obigen Code erstellen wir einen Absatz und geben ihm eine ID, dann schreiben wir die zu wiederholende Zeichenfolge mit JavaScript, dann wiederholen wir sie 500 Mal mit der Funktion getElementByid, dann gehen wir zum CSS-Teil und fügen The hinzu Das Hintergrundbild wird entfernt und der Text so zugeschnitten, dass nur der Text im Vordergrund des Bildes sichtbar ist. Wir erhalten ein Autoporträt mit dem Fülltext „Hallo, wie geht es dir“. Schauen wir uns die Ausgabe des folgenden Codes an.
In der obigen Ausgabe sehen Sie, dass sich der Text im Vordergrund und das Bild des Autos im Hintergrund befindet. Wir haben unsere Ausgabe mit der JavaScript-Wiederholung erhalten und den Wert auf 500 gesetzt, was bedeutet, dass der Text insgesamt 500 Mal wiederholt wird Leinwand.
Die Funktion string.repeat() ist eine integrierte Funktion, die mithilfe einer angegebenen Anzahl von Kopien eines Strings einen neuen String erstellt, wie im folgenden Beispiel gezeigt
<script> A = "hello"; a=A.repeat(2); document.write(a); </script>
Der obige Code erzeugt die folgende Ausgabe.
Hier ist ein Beispiel, das zeigt, wie wir die Eigenschaft string.repeat verwenden können.
Beispiel
Sehen wir uns ein weiteres Beispiel eines mit CSS erstellten Textporträts an
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of a text-potrait using CSS</title>
<style>
p{
background: url(
"https://cdn.pixabay.com/photo/2016/02/23/17/42/orange-1218158__340.png");
-webkit-background-clip: text;
line-height: 16px;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
line-height: 16px;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 76vh;
}
body {
overflow: hidden;
background: rgb(236, 236, 236);
font-family: "Segoe UI", sans;
}
.tut{
text-align: center;
background-color:green;
color:white;
}
</style>
</head>
<body>
<div class="tut">
<h1 id="Welcome-to-tutorial-s-point"> Welcome to tutorial's point </h1>
<h2 id="This-is-an-Example-of-a-text-portrait">This is an Example of a text portrait </h2>
</div>
<p id="repeat"></p>
<script>
let str = "Orange is a fruit ";
document.getElementById("repeat").innerHTML = str.repeat(600);
</script>
</body>
</html>
Im obigen Code haben wir mehrere CSS-Eigenschaften verwendet, um zu demonstrieren, wie wir ein Textporträt erstellen können. Das JavaScript im obigen Code verwendet die Funktion str.repeat, um den Text mehrmals im Bild zu drucken.
In der obigen Ausgabe können Sie sehen, dass der Text die Form einer Orange angenommen hat, die unser eigentliches Bild war. Kommen wir nun zum Abschluss dieses Tutorials.
Fazit
Wir erstellen ein Textporträt mit CSS und ein paar Codezeilen und verwenden die JavaScript-Funktion string.repeat. Wir erhalten unser Ergebnis. Zuerst schreiben wir den Text, der im Vordergrund erscheinen soll, und entscheiden, wie oft der Text wiederholt wird. Die Ausgabe, die wir erhalten, hängt auch von der Länge der Zeichen im Text ab.
In diesem Artikel haben wir gesehen, wie man mit nur wenigen Zeilen CSS-Code und JavaScript-Funktionen Text erstellt.
Das obige ist der detaillierte Inhalt vonEin Textporträt mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben?
Apr 04, 2025 pm 11:54 PM
GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...
