CSS には複数の疑似セレクターが含まれており、「::before」もそのうちの 1 つです。 CSS の各疑似セレクターを使用すると、さまざまなスタイルを使用して HTML 要素のスタイルを設定できます。
また、「::before」擬似セレクターを使用すると、特定の HTML の背景画像を設定できます。これについては、このチュートリアルで学習します。
チュートリアルを開始する前に、「:before」と「::before」が等しいことを明確にしましょう。 CSS2 は「:before」を使用しますが、CSS3 は「::before」を使用します。
###文法###上記の構文では、css セレクターとともに '::before' セレクターを使用しています。実際には、要素の前にコンテンツが追加されます。ここでは、HTML コンテンツを設定する必要がないため、空のコンテンツを使用しました。背景画像を設定するにはbackground-imageプロパティを使用し、背景画像の位置を設定するにはpositionプロパティを使用します。
例 1 (「::before」擬似セレクターを使用して背景画像を設定する)
セレクターで上下左右の位置を設定します。さらに、背景画像を操作するために、背景画像に関連するプロパティをいくつか追加しました。出力では、ユーザーは Web ページ全体の背景画像を確認できます。
リーリー例 2 (特定の div 要素の背景画像を設定する)
出力では、div 要素全体ではなく、背景画像を含む div 要素が確認できます。
リーリー
例 3 (「::before」セレクターを使用して背景として線形グラデーションを設定する)以下の例では、「::before」疑似セレクターを使用して、特定の HTML 要素の背景に線形グラデーションを設定します。ここでは、linear-gradient() 関数を「background」プロパティの値として使用して、画像ではなく背景にグラデーションを設定します。
リーリー
「::before」疑似セレクターを使用して背景画像を設定する方法を学びました。疑似セレクターを使用して Web ページにコンテンツを追加すると、Web ページの現在のフローからコンテンツを削除することによって、コンテンツが独立して追加されます。 .したがって、擬似セレクターを使用すると、現在のコンテンツに影響を与えることなく、Web ページにコンテンツを追加できます。さらに、Web ページの上にコンテンツを追加できます。ここでは、他のコンテンツの上に背景画像も追加しますが、「z-index」属性を使用して画像を div 要素の背景として設定しました。
以上がCSSの::before疑似セレクターを使用して背景画像を配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。