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

百变鹏仔 3个月前 (09-21) #HTML

文章标签肖像

为网站添加样式是创建网站最重要的部分，因为它作为用户首次访问你的网站时的吸引点。我们可以使用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.

Conclusion

使用CSS和几行代码创建文本肖像，并使用JavaScript函数string.repeat，我们得到了我们的结果，首先我们写下了想要出现在前景中的文本，并决定文本重复的次数。我们将获得的输出也取决于文本中字符的长度。

在本文中，我们看到了如何仅使用几行CSS代码和JavaScript的函数来创建文本。

文章推荐

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

Creating the text portrait

语法

Example

Example

Conclusion

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8