資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用CSS建立文字肖像？
網站樣式設計是建立網站最不可或缺的部分，因為它作為使用者第一次訪問您網站時的吸引點。我們可以使用CSS建立許多型別的設計和互動式體驗。可以使用Illustrator或Photoshop建立文字肖像，使設計更具吸引力。
在本文中，我們將瞭解如何使用CSS和一些JavaScript函式生成和建立文字肖像，以實現我們的文字肖像效果。
建立文字肖像
文字肖像是一種看起來像包含文字的影像，最終形成某種物體或人物。我們將使用CSS來實現這種文字肖像。讓我們討論一下我們將用於文字肖像的方法。
以下是我們在建立文字肖像時遵循的步驟：
步驟1 - 我們將首先建立一個包含您想要新增的所需文字的文件。假設我們將新增文字“hello”，並將使用JavaScript的repeat()函式重複該單詞。
步驟2 - 我們將要做的是使背景更具吸引力，方法是將其顏色設定為黑色，我們還將使用URL函式設定背景影像。我們將使用屬性“background repeat”並將它的值設定為“no repeat”，這樣影像就不會重複。
步驟3 - 我們現在將在影像中列印我們的文字，因此我們將剪輯文字，並將新增其他屬性，例如更改字型和調整大小等。
使用JavaScript repeat函式。
語法
讓我們看看Javascript repeat函式的語法。
string.repeat(count);
在語法中使用的count變數是一個值，它將告訴函式重複給定字串多少次，count的範圍是從0到無窮大。
示例
為了更好地理解這一點，讓我們看看一個使用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>
在上面的程式碼中，我們建立了一個段落併為其指定了一個id，之後我們使用了JavaScript並編寫了我們想要重複的字串，之後我們使用了函式getElementByid並將其重複了500次，然後我們進入CSS部分並添加了背景影像並剪輯了文字，以便只有影像前景中的文字可見。我們將獲得一輛帶有“hello how are you”文字填充的汽車肖像。讓我們看看以下程式碼的輸出。
在上面的輸出中，您可以看到文字位於前景中，汽車影像位於背景中，我們使用JavaScript repeat並將值設定為500獲得了我們的輸出，這意味著文字將在整個畫布中重複500次。
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>
在上面的程式碼中，我們使用了幾個CSS屬性來演示如何建立文字肖像。上面的程式碼中的JavaScript使用str.repeat函式，以便在影像中多次列印文字。
您可以在上面的輸出中看到，文字已經形成了橙色的形狀，這就是我們的實際影像。現在讓我們結束本教程。
結論
使用幾行程式碼和JavaScript函式string.repeat建立文字肖像，首先，我們編寫了我們想要出現在前景中的文字，並確定文字應重複多少次。我們將獲得的輸出還取決於文字中字元的長度。
在本文中，我們看到了如何僅使用幾行CSS程式碼和一個JavaScript函式來建立文字。
497 次瀏覽
