為網站添加樣式是建立網站最重要的部分，因為它作為用戶首次訪問你的網站時的吸引點。我們可以使用CSS創建許多類型的設計和互動體驗。可以使用Illustrator或Photoshop建立文字肖像，以使設計更具吸引力。
In this article we are going to have a look at how can we generate and create a text portrait using CSS and some JavaScript function so as to achieve our text portrait.
文字肖像是一種看起來像是有文字的圖像，最終形成某個物體或人物的樣子。我們將使用CSS來實現這個文本肖像。讓我們來談談我們將用於文本肖像的方法。
以下是我們在創建文字肖像時遵循的步驟：
第一步
- 我們首先要建立一個帶有您想要新增的所需文字的文件。假設我們將新增文字“hello”，並使用JavaScript的repeat()函數重複該字。Step 2
− The second thing we are going to do will be making the background more appealing by setting its color to black and we will also set background image using the URL function. We will be will also set background image using the URL function. We will be using property “background repeat” and set its value to “no repeat” so that the image does not get repeated.步驟 3
− 現在我們將在圖像中列印我們的文本，因此我們將剪輯文字並添加其他屬性，例如更改字體和調整大小等。For using the JavaScript repeat function.
讓我們來看看Javascript repeat函數的語法。
string.repeat(count);
To understand this better let’s, look at an example of creating thee text portrait using CSS.
<!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>
In the above output you can see that the text is in the foreground and the image of the car is in background we got our output using the JavaScript repeat and setting the value to 500 which means the text will be repeated 500 which means the text will be repeated 500 the whole canvas.
string.repeat()函數是一個內建函數，它使用指定數量的字串副本來建立一個新的字串，如下面的範例所示
<script> A = "hello"; a=A.repeat(2); document.write(a); </script>
這是一個範例，展示了我們如何使用string.repeat屬性。
讓我們來看一個使用CSS建立的文字肖像的另一個例子
<!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>
#You can see in the above output that the text has taken the shape of an orange which was our actual image. Now let’s head over to conclude this tutorial.
使用CSS和幾行程式碼建立文本肖像，並使用JavaScript函數string.repeat，我們得到了我們的結果，首先我們寫下了想要出現在前景中的文本，並決定文本重複的次數。我們將獲得的輸出也取決於文字中字元的長度。
在本文中，我們看到如何只使用幾行CSS程式碼和JavaScript的函數來建立文字。
以上是使用CSS建立一個文字肖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
