数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学使用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函数，以便在图像中多次打印文本。
您可以在上面的输出中看到，文本已经形成了橙色的形状，这就是我们的实际图像。现在让我们结束本教程。
结论
使用几行代码和JavaScript函数string.repeat创建文本肖像，首先，我们编写了我们想要出现在前景中的文本，并确定文本应重复多少次。我们将获得的输出还取决于文本中字符的长度。
在本文中，我们看到了如何仅使用几行CSS代码和一个JavaScript函数来创建文本。
497 次浏览
