CSSの::before疑似セレクターを使用して背景画像を配置するにはどうすればよいですか?

CSS には複数の疑似セレクターが含まれており、「::before」もそのうちの 1 つです。 CSS の各疑似セレクターを使用すると、さまざまなスタイルを使用して HTML 要素のスタイルを設定できます。

また、「::before」擬似セレクターを使用すると、特定の HTML の背景画像を設定できます。これについては、このチュートリアルで学習します。

チュートリアルを開始する前に、「:before」と「::before」が等しいことを明確にしましょう。 CSS2 は「:before」を使用しますが、CSS3 は「::before」を使用します。

＃＃＃文法＃＃＃

ユーザーは、「::before」疑似セレクターを使用して、次の構文に従って特定の HTML 要素の背景画像を設定できます。

リーリー

上記の構文では、css セレクターとともに '::before' セレクターを使用しています。実際には、要素の前にコンテンツが追加されます。ここでは、HTML コンテンツを設定する必要がないため、空のコンテンツを使用しました。背景画像を設定するにはbackground-imageプロパティを使用し、背景画像の位置を設定するにはpositionプロパティを使用します。

例 1 (「::before」擬似セレクターを使用して背景画像を設定する)

以下の例では、「background」クラスを含む div 要素を作成します。 CSS では、クラス名を使用して div 要素にアクセスし、CSS スタイルを適用します。さらに、div 要素のクラス名と「::before」疑似セレクターを使用して背景画像を追加しました。

セレクターで上下左右の位置を設定します。さらに、背景画像を操作するために、背景画像に関連するプロパティをいくつか追加しました。出力では、ユーザーは Web ページ全体の背景画像を確認できます。

リーリー

例 2 (特定の div 要素の背景画像を設定する)

以下の例では、「::before」疑似セレクターを使用して、特定の div 要素の背景画像を設定する方法を示しました。

ここでは、特定の div 要素のみの背景画像を設定するために、疑似セレクターで画像のサイズを設定します。また、「background-size: cover」プロパティを使用しました。

出力では、div 要素全体ではなく、背景画像を含む div 要素が確認できます。

リーリー

例 3 (「::before」セレクターを使用して背景として線形グラデーションを設定する)

以下の例では、「::before」疑似セレクターを使用して、特定の HTML 要素の背景に線形グラデーションを設定します。ここでは、linear-gradient() 関数を「background」プロパティの値として使用して、画像ではなく背景にグラデーションを設定します。

出力では、div 要素の背景としてグラデーションが確認できます。

リーリー

「::before」疑似セレクターを使用して背景画像を設定する方法を学びました。疑似セレクターを使用して Web ページにコンテンツを追加すると、Web ページの現在のフローからコンテンツを削除することによって、コンテンツが独立して追加されます。 .

したがって、擬似セレクターを使用すると、現在のコンテンツに影響を与えることなく、Web ページにコンテンツを追加できます。さらに、Web ページの上にコンテンツを追加できます。ここでは、他のコンテンツの上に背景画像も追加しますが、「z-index」属性を使用して画像を div 要素の背景として設定しました。

以上がCSSの::before疑似セレクターを使用して背景画像を配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。