为网站添加样式是创建网站最重要的部分，因为它作为用户首次访问你的网站时的吸引点。我们可以使用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创建一个文本肖像？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用CSS创建一个文本肖像？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
