使用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函数，以便在图像中多次打印文本。

您可以看到上面的输出，文本以一个橙子的形状出现，这是我们实际的图像。现在让我们继续总结本教程。