CSSを使用してテキストポートレートを作成しますか?

Web サイトにスタイルを追加することは、ユーザーが最初に Web サイトにアクセスしたときにユーザーを惹きつける役割を果たすため、Web サイト作成の最も重要な部分です。 CSS を使用して、さまざまな種類のデザインやインタラクティブなエクスペリエンスを作成できます。 Illustrator または Photoshop を使用してテキストポートレートを作成し、デザインをより魅力的にすることができます。

この記事では、テキスト ポートレートを実現するために、CSS といくつかの JavaScript 関数を使用してテキスト ポートレートを生成および作成する方法を見ていきます。

テキストポートレートの作成

テキスト ポートレートは、テキストが含まれているように見える画像で、最終的には物体や人物がどのように見えるかを示します。 CSS を使用してこのテキスト ポートレートを実装します。テキストポートレートに使用する方法について話しましょう。

テキストポートレートを作成するときに従う手順は次のとおりです:

ステップ 1 - まず、追加する必要なテキストを含むドキュメントを作成します。 「hello」というテキストを追加し、JavaScript のrepeat() 関数を使用してその単語を繰り返すとします。

ステップ 2 -次に行うことは、背景の色を黒に設定して背景をより魅力的にし、URL 関数を使用して背景画像も設定します。画像が繰り返されないように、「背景の繰り返し」プロパティを「繰り返しなし」に設定します。

ステップ3 -次に、画像内にテキストを印刷します。そのため、テキストをクリップし、フォントの変更やサイズ変更などの他のプロパティを追加します。

JavaScriptのリピート機能を使用する場合。

＃＃＃文法＃＃＃

JavaScript の繰り返し関数の構文を見てみましょう。

リーリー

構文で使用される

count

変数は、指定された文字列を何回繰り返すかを関数に指示する値であり、カウントの範囲は 0 から無限大までです。

＃＃＃例＃＃＃ これをよりよく理解するために、CSS を使用して 3 つのテキスト ポートレートを作成する例を見てみましょう。 リーリー

上記のコードでは、段落を作成して ID を与え、次に JavaScript を使用して繰り返す文字列を記述し、関数

getElementByid

を使用してそれを 500 回繰り返します。 CSS パーツに背景画像を追加し、画像の前景のテキストのみが表示されるようにテキストをトリミングしました。 「こんにちは、お元気ですか」というフィラーテキストを含む車のポートレートを取得します。次のコードの出力を見てみましょう。

上記の出力では、テキストが前景にあり、車の画像が背景にあることがわかります。JavaScript の繰り返しを使用し、値を 500 に設定して出力を取得しました。これは、テキストが 500 回繰り返されることを意味します。キャンバス全体。

string.repeat() 関数は、以下の例に示すように、指定された数の文字列のコピーを使用して新しい文字列を構築する組み込み関数です。 リーリー 上記のコードは次の出力を生成します。

これは、string.repeat プロパティの使用方法を示す例です。

＃＃＃例＃＃＃

CSS を使用して作成されたテキスト ポートレートの別の例を見てみましょう

リーリー

上記のコードでは、いくつかの CSS プロパティを使用して、テキスト ポートレートを作成する方法を示しました。上記のコードの JavaScript は、str.repeat 関数を使用して、画像内にテキストを複数回印刷します。

上記の出力では、テキストが実際の画像であるオレンジの形をしていることがわかります。それでは、このチュートリアルを終了しましょう。

＃＃＃結論＃＃＃

CSS と数行のコードを使用してテキスト ポートレートを作成し、JavaScript 関数 string.repeat を使用すると、結果が得られます。まず、前景に表示するテキストを記述し、そのテキストが何回表示されるかを決定します。繰り返した。得られる出力は、テキスト内の文字の長さによっても異なります。

この記事では、わずか数行の CSS コードと JavaScript 関数を使用してテキストを作成する方法について説明しました。

以上がCSSを使用してテキストポートレートを作成しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。