使用 CSS 的文字人像
在本文中,我们将学习通过几个简单的步骤使用 CSS 创建一个文本肖像。如果你想知道,那就继续读这篇文章。我们已经规定了你需要采取的所有步骤。让我们开始设计文字肖像。
使用 CSS 的文本纵向
方法:以下是获取所需文本人像所需的步骤。
- 创建一个带有一堆“GeeksforGeeks”文本的 HTML 文档,为了重复特定的单词,我们使用了如下所示的 JavaScript repeat() 函数。
- 要使背景变暗以使人像具有吸引力,请使用背景属性,并使用 CSS 中的 url()函数设置背景图像。为了避免图像重复,请将背景-重复设置为不重复,方法是将图像放在中心。为了更好的可视化,减少线之间的空间。
- 为了打印带有前景文本的背景,我们需要剪辑文本&添加一些样式属性,如背景尺寸,字体等。
示例:
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Portrait using CSS</title>
<style>
body {
background: rgb(236, 236, 236);
overflow: hidden;
font-family: "Segoe UI", sans-serif;
}
p {
line-height: 14px;
background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210628182253/gfglogo.png");
-webkit-background-clip: text;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 80vh;
background-position: center;
}
</style>
</head>
<body>
<p id="text"></p>
<script>
let str = "GeeksForGeeks ";
document.getElementById("text").innerHTML = str.repeat(500);
</script>
</body>
</html>
输出:
最终输出
版权属于:月萌API www.moonapi.com,转载请注明出处