ブートストラップ背景画像の作り方

ブートストラップの背景画像を設定するには 2 つの方法があります: CSS ルールを使用して背景画像を追加します:background-image: url(path/to/image.png); ユーティリティ クラスを使用して .bg- を追加します。画像を選択し、スタイルに追加します。背景画像のパス、サイズ、繰り返し設定などのルールを表に定義します。

#Bootstrap の背景画像の設定

方法 1: CSS ルールを使用する

背景画像を適用する要素に次の CSS ルールを追加します。

1. <code class="css">background-image: url(path/to/image.png);</code>

   ログイン後にコピー

2. path/to/image.png を、使用する画像へのパスに置き換えます。
必要に応じて、次のような他のバックグラウンド プロパティを設定できます。

3. <code class="css">background-size: cover;
   background-repeat: no-repeat;</code>

   ログイン後にコピー

方法 2: Bootstrap ユーティリティ クラスを使用する

要素に背景画像を適用するには、次のユーティリティ クラスを追加します。

1. <code class="html"><div class="bg-image"></div></code>

   ログイン後にコピー

スタイル シートで、
2. .bg-image クラスに次のルールを追加します。 :

<code class="css">.bg-image {
  background-image: url(path/to/image.png);
  background-size: cover;
  background-repeat: no-repeat;
}</code>

ログイン後にコピー

注:

背景画像のパスは、絶対パスまたは現在の HTML ドキュメントに対する相対パスにすることができます。
• メディア クエリを使用して、さまざまなデバイス サイズにさまざまな背景画像を読み込むことができます。
• background-position 属性を使用して、要素内の背景画像の位置を制御することもできます。

以上がブートストラップ背景画像の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。