使用CSS创建一个文本肖像？-html教程-PHP中文网

使用CSS创建一个文本肖像？

PHPz

发布： 2023-09-09 17:05:02

转载

984人浏览过

使用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.

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

<!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.