使用CSS創建一個文本肖像？-魔扣目錄

為網站添加樣式是創建網站最重要的部分，因為它作為用戶首次訪問你的網站時的吸引點。我們可以使用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.

Creating the 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 using the 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);

登錄后復制

在語法中使用的count變量是一個值，它將告訴函數要重復給定字符串的次數，而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>

登錄后復制

在上面的代碼中，我們創建了一個段落并給它一個id，然后我們使用JavaScript編寫了要重復的字符串，然后我們使用函數getElementByid重復了它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()函數是一個內置函數，它使用指定數量的字符串副本構建一個新的字符串，如下面的示例所示

<script>
   A = "hello";
   a=A.repeat(2);
   document.write(a);
</script>

登錄后復制

The above code will produce the following output.

這是一個示例，展示了我們如何使用string.repeat屬性。

Example

讓我們來看一個使用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>

登錄后復制

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.