要素（）を使用してCSSの背景画像としてテキストを繰り返す方法

最近、1つのデザイントレンドが非常に人気があります。テキストを繰り返し表示します。たとえば、GoCompareのWebサイトは、このデザインを大規模なマルチチャネル広告キャンペーンで使用しています。ナイキはまた、彼の広告でこのデザイン技術を使用しています。

このデザイン効果をWebページで達成する方法について考えてきました。マークアップで直接テキストを繰り返したり、Photoshopなどのツールを使用して画像としてデザインをエクスポートしたりすることもできますが、画像にテキストを入力することはSEOとアクセシビリティを助長しません。実際のテキストがあっても、スクリーンリーダーに声を出して読んでもらいたくありません。

多機能多機能多機能多機能

わかりました、停止！

これらの要因は、この種のWebデザインを達成するのを難しくしているようです。その後、CSSで長年のサポートされていないelement()機能を使用することに熱心でした。単一のボタン要素であろうと完全なコンテンツであろうと、任意のHTML要素を背景画像として使用できます<div>。仕様によると：<blockquote><p> <code>element()関数は、実際のコンテンツとその構造ではなく、参照される要素の外観のみを再現します。著者は、装飾目的でのみ使用する必要があります。

私たちの目的のために、重複する効果のためにテキスト要素を参照します。

繰り返したいテキスト要素に適用できるIDを定義しましょう。私たちはそれを#thingyと名付けます。 #thingyを使用する場合、 element()値の前に-moz-プレフィックスを追加する必要があることに注意してください。 Firefoxは2010年以来element()をサポートしていますが、残念ながら、それ以来、他のブラウザはそれをサポートしていません。

 。要素 {
  バックグラウンドイメージ：-moz-element（#thingy）;
}

これは、以前に見たナイキ広告の比較的ゆるい再現です。繰り返しますが、Firefoxは、予想どおりデモを表示する必要があります。

コンセプトでどのように機能するかを見たことがありますか？要素（ #versatility ）をページに配置し、高さをゼロに設定し、ボディの背景画像として設定し、 background-repeatプロパティを使用してページの下に垂直に繰り返します。

element()背景は動的です。これは、参照されているHTML要素が変更された場合、それを使用した要素の背景画像の外観も変化することを意味します。これは、カスタムプロパティを使用することに似ています。変数を変更し、それが使用されているすべての場所で更新されます。

もちろん、このプロパティには他のユースケースがあります。 Prethiがそれを使用して記事のページのスクロールナビゲーションを作成する方法をご覧ください。より高度になりたい場合は、HTMLキャンバス要素を背景として使用することもできます。私がそれを使用する1つの方法は、ディレクトリにページのスクリーンショットを表示することです。 Vincent de Oliveiraは、いくつかの非常に創造的な例を文書化しました。レトロなWebデザインが好きな場合、これは画像反射効果です。

とてもクールですよね？繰り返しますが、これが生産に入れることができるこのシンプルなデザイン効果を得る方法であると言えたらいいのにと思いますが、そうです。実際、これはブラウザに実装したいものに対してあなたの声を作るための素晴らしいリマインダーです。 WebKitとChromiumでは、公開チケットを提出できます。うまくいけば、最終的にはSafariとChromeでこの機能を取得することを願っています。

以上が要素（）を使用してCSSの背景画像としてテキストを繰り返す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。