HTML 使用文字画像

网站的风格设计是创建网站最不可缺少的部分，因为它是第一次访问你的网站的用户的一个挂钩点。我们可以使用CSS创建许多类型的设计和互动体验。可以用illustrator或Photoshop创建一个文本肖像，使设计具有吸引力。

在这篇文章中，我们将看看如何使用CSS和一些JavaScript函数来生成和创建一个文本肖像，从而实现我们的文本肖像。

创建文字头像

文字肖像是一种看起来像有文字的图像，它最终会形成一些物体或人。我们将使用CSS来实现这个文本肖像。让我们来谈谈我们将用于文字肖像的方法。

以下是我们在创建文本肖像时遵循的步骤 —

第1步 --我们将首先创建一个文档，其中包含你想要添加的文本。比方说，我们将添加文本 “hello”，我们将使用JavaScript repeat()函数来重复这个词。

第2步 --我们要做的第二件事是通过将其颜色设置为黑色来使背景更加吸引人，我们还将使用URL函数设置背景图片。我们将使用属性 “background repeat “并将其值设置为 “no repeat”，这样图像就不会被重复。

第3步 - 我们现在将在图像中打印我们的文本，所以我们将剪切文本并将添加其他属性，如改变字体和调整大小等。

对于使用JavaScript的重复功能。

语法

让我们来看看Javascript重复函数的语法。

string.repeat(count);

语法中使用的 count 变量是一个值，它将告诉函数要重复给定的字符串多少次，count的范围从0到无限大。

例子

为了更好地理解这一点，让我们看一个使用CSS创建e文本肖像的例子。

<!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部分添加了背景图片，并剪切了文本，这样只有图片前景中的文本才会被看到。我们将得到一个汽车的肖像，其中的文字是 “你好吗”。让我们看一下下面代码的输出。

在上面的输出中，你可以看到文本在前景中，而汽车的图像在背景中，我们使用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函数，以便在图像中多次打印文本。

你可以在上面的输出中看到，文本已经呈现出一个橙色的形状，这就是我们的实际图像。现在让我们来总结一下这个教程。