Créer un portrait textuel en utilisant CSS ?-tutoriel HTML-php.cn

Créer un portrait textuel en utilisant CSS ?

PHPz

Libérer： 2023-09-09 17:05:02

avant

1000 Les gens l'ont consulté

Créer un portrait textuel en utilisant CSS ?

Ajouter du style à votre site Web est la partie la plus importante de la création d'un site Web, car il sert de point d'attraction pour les utilisateurs lorsqu'ils visitent votre site Web pour la première fois. Nous pouvons créer de nombreux types de conceptions et d'expériences interactives en utilisant CSS. Des portraits textuels peuvent être créés à l’aide d’Illustrator ou de Photoshop pour rendre le design plus attrayant.

Dans cet article, nous allons voir comment générer et créer un portrait textuel en utilisant CSS et certaines fonctions JavaScript afin de réaliser notre portrait textuel.

Création du portrait textuel

Un portrait textuel est une image qui semble contenir du texte, aboutissant à l'apparence d'un objet ou d'une personne. Nous utiliserons CSS pour implémenter ce portrait textuel. Parlons des méthodes que nous allons utiliser pour les portraits textuels.

Voici les étapes que nous suivons lors de la création d'un portrait textuel :

Étape 1 - Nous commençons par créer un document avec le texte requis que vous souhaitez ajouter. Supposons que nous ajoutions le texte « bonjour » et que nous répétions le mot à l'aide de la fonction répétition() de JavaScript.

Étape 2 - La deuxième chose que nous allons faire sera de rendre l'arrière-plan plus attrayant en définissant sa couleur sur noir et nous définirons également l'image d'arrière-plan à l'aide de la fonction URL. Nous utiliserons la propriété « répétition d'arrière-plan » et. définissez sa valeur sur « pas de répétition » afin que l'image ne soit pas répétée.

Étape 3 - Nous allons maintenant imprimer notre texte dans l'image, nous allons donc découper le texte et ajouter d'autres propriétés comme changer la police et redimensionner, etc.

Pour utiliser la fonction de répétition JavaScript.

Grammaire

Jetons un coup d'œil à la syntaxe de la fonction de répétition Javascript.

string.repeat(count);

Copier après la connexion

La variable count utilisée dans la syntaxe est une valeur qui indiquera à la fonction combien de fois répéter la chaîne donnée, et le nombre va de 0 à l'infini.

Exemple

Pour mieux comprendre cela, regardons un exemple de création de portrait textuel en utilisant 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>

Copier après la connexion

Dans le code ci-dessus, nous avons créé un paragraphe et lui avons donné un identifiant, puis nous avons écrit la chaîne à répéter en utilisant JavaScript, puis nous l'avons répété 500 fois en utilisant la fonction getElementByid, puis nous sommes passés à la partie CSS en ajoutant The L'image d'arrière-plan est supprimée et le texte est recadré afin que seul le texte au premier plan de l'image soit visible. Nous obtiendrons un portrait de voiture avec un texte de remplissage de "Bonjour, comment vas-tu". Jetons un coup d'œil à la sortie du code suivant.

Dans la sortie ci-dessus, vous pouvez voir que le texte est au premier plan et l'image de la voiture est en arrière-plan. Nous avons obtenu notre sortie en utilisant la répétition JavaScript et en définissant la valeur sur 500, ce qui signifie que le texte sera répété 500 fois dans son ensemble. toile.

La fonction string.repeat() est une fonction intégrée qui construit une nouvelle chaîne en utilisant un nombre spécifié de copies d'une chaîne, comme le montre l'exemple ci-dessous

<script>
   A = "hello";
   a=A.repeat(2);
   document.write(a);
</script>

Copier après la connexion

Le code ci-dessus produira le résultat suivant.

Voici un exemple montrant comment nous pouvons utiliser la propriété string.repeat.

Exemple

Regardons un autre exemple de portrait textuel créé en utilisant 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>

Copier après la connexion

Dans le code ci-dessus, nous avons utilisé plusieurs propriétés CSS pour montrer comment créer un portrait textuel. Le JavaScript dans le code ci-dessus utilise la fonction str.repeat afin d'imprimer le texte plusieurs fois dans l'image.

Vous pouvez voir dans le résultat ci-dessus que le texte a pris la forme d'une orange qui était notre image réelle. Passons maintenant à la conclusion de ce didacticiel.

Conclusion

En créant un portrait de texte en utilisant CSS et quelques lignes de code et en utilisant la fonction JavaScript string.repeat, nous obtenons notre résultat, nous écrivons d'abord le texte que nous voulons voir apparaître au premier plan et décidons combien de fois le texte est répété. Le résultat que nous obtiendrons dépend également de la longueur des caractères dans le texte.

Dans cet article, nous avons vu comment créer du texte en utilisant seulement quelques lignes de code CSS et des fonctions JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!