為網(wǎng)站添加樣式是創(chuàng)建網(wǎng)站最重要的部分，因為它作為用戶首次訪問你的網(wǎng)站時的吸引點。我們可以使用CSS創(chuàng)建許多類型的設(shè)計和交互體驗。可以使用Illustrator或Photoshop創(chuàng)建文本肖像，以使設(shè)計更具吸引力。
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.
Creating the text portrait
文本肖像是一種看起來像是有文字的圖像，最終形成某個物體或人物的樣子。我們將使用CSS來實現(xiàn)這個文本肖像。讓我們來談?wù)勎覀儗⒂糜谖谋拘は竦姆椒ā?/p>
以下是我們在創(chuàng)建文本肖像時遵循的步驟：
第一步 – 我們首先要創(chuàng)建一個帶有您想要添加的所需文本的文檔。假設(shè)我們將添加文本“hello”，并使用JavaScript的repeat()函數(shù)重復(fù)該單詞。
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 using the property “background repeat” and set its value to “no repeat” so that the image does not get repeated.
步驟 3 ? 現(xiàn)在我們將在圖像中打印我們的文本，因此我們將剪輯文本并添加其他屬性，如更改字體和調(diào)整大小等。
For using the JavaScript repeat function.
語法
讓我們來看一下Javascript repeat函數(shù)的語法。
string.repeat(count);
登錄后復(fù)制
在語法中使用的count變量是一個值，它將告訴函數(shù)要重復(fù)給定字符串的次數(shù)，而count的范圍是從0到無窮大。
Example
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>
登錄后復(fù)制
在上面的代碼中，我們創(chuàng)建了一個段落并給它一個id，然后我們使用JavaScript編寫了要重復(fù)的字符串，然后我們使用函數(shù)getElementByid重復(fù)了它500次，然后我們進入CSS部分，添加了背景圖像并裁剪了文本，以便只有在圖像前景中的文本可見。我們將得到一張帶有“你好，你好嗎”的填充文本的汽車肖像。讓我們看一下以下代碼的輸出。
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 time in the whole canvas.
string.repeat()函數(shù)是一個內(nèi)置函數(shù)，它使用指定數(shù)量的字符串副本構(gòu)建一個新的字符串，如下面的示例所示
<script> A = "hello"; a=A.repeat(2); document.write(a); </script>
登錄后復(fù)制
The above code will produce the following output.
這是一個示例，展示了我們?nèi)绾问褂胹tring.repeat屬性。
Example
讓我們來看一個使用CSS創(chuàng)建的文字肖像的另一個例子
<!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>
登錄后復(fù)制
In the code above we used several CSS properties to demonstrate how can we create a text portrait. The JavaScript in the above code uses the str.repeat function so as to print the text multiple times in the image.
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.
Conclusion
使用CSS和幾行代碼創(chuàng)建文本肖像，并使用JavaScript函數(shù)string.repeat，我們得到了我們的結(jié)果，首先我們寫下了想要出現(xiàn)在前景中的文本，并決定文本重復(fù)的次數(shù)。我們將獲得的輸出也取決于文本中字符的長度。
在本文中，我們看到了如何僅使用幾行CSS代碼和JavaScript的函數(shù)來創(chuàng)建文本。
以上就是使用CSS創(chuàng)建一個文本肖像？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
