使用 CSS 绘制文字肖像?

htmlcssweb developmentfront end technology更新于 2025/1/30 14:04:17

网站设计是网站创建过程中最重要的部分，因为它可以吸引初次访问您网站的用户。我们可以使用 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 变量是一个值，它告诉函数重复给定字符串的次数，计数范围从 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 部分，添加了背景图片并裁剪了文本，以便只有图片前景中的文本可见。我们将得到一幅汽车肖像，其文字填充为"你好，你好吗"。让我们看看以下代码的输出。

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

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