使用 CSS 的文字肖像

在本文中，我们将通过几个简单的步骤学习使用 CSS 创建文本肖像。如果您想知道，请继续阅读本文。我们已经指定了您需要采取的所有步骤。那么让我们开始设计文字肖像。

使用 CSS 的文字肖像

方法：以下是获得所需文本肖像所需的步骤。

1. 创建一个包含一堆“GeeksforGeeks”文本的 HTML 文档，为了重复特定的单词，我们使用 JavaScript 的 repeat()函数，如下面的 HTML 代码所示。
2. 要使背景变暗以使肖像吸引人，请使用 background 属性以及使用 CSS 中的 url()函数设置背景图像。为避免图像重复，将图像置于中心，将背景重复设置为不重复。为了更好地可视化，请减少线条之间的空间。
3. 为了用前景文本打印背景，我们需要剪辑文本并添加一些样式属性，例如背景大小、字体等。

例子：

HTML

  

    Text Portrait using CSS
    
        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;
        }
    

  

    
  
    
        let str = "GeeksForGeeks ";
        document.getElementById("text").innerHTML = str.repeat(500);
    

  

输出：

最终输出