首頁 >web前端 >html教學 >使用CSS建立一個文字肖像？

使用CSS建立一個文字肖像？

PHPz轉載: 2023-09-09 17:05:02989瀏覽

使用CSS建立一個文字肖像？

為網站添加樣式是建立網站最重要的部分，因為它作為用戶首次訪問你的網站時的吸引點。我們可以使用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 will also set background image using the URL function. We will be using 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 which means the text will be repeated 500 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建立一個文字肖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css print String count for 字符串 using Property function this background canvas photoshop

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：在HTML中設定影像映射區域的座標？下一篇：在HTML中設定影像映射區域的座標？

看更多