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.
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.
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.
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> Welcome to tutorial's point </h1>
<h2>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.
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> Welcome to tutorial's point </h1>
<h2>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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
