導入
背景画像のサイズは、background-size プロパティを使用して決定できます。画像を左のように拡張して、利用可能なスペースに合わせて作成できます。背景サイズプロパティの実装には非常に多くの構文があります。値と単位値を使用して、背景サイズのプロパティを設定できます。
単位値では、パーセントまたはピクセルの形式で背景サイズのプロパティを定義できます。グローバル値を利用して定義することもできます。以下のスニペットを使用して、グローバル値を使用してこれを実装できます。
Pythonのフィルタリング
.card-hero inherit
トピックを簡単に理解しましょう。
キーワードの値
cover と contains を利用してキーワード値を使用できます。これらのキーワード値を使用して背景サイズを変更できます。
1. 表紙:
cover キーワードを使用して背景サイズを設定できます。背景サイズをカバーとして定義すると、画像はスペースを残さずコンテナに収まります。また、画面に合わせて画像を強化します。
以下の例を使ってこれを理解してみましょう。
例 1:
コード：
Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url('https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp'); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 出力
Javaには部分文字列が含まれています
説明：
上記のコードでは、background-image プロパティを使用して 3 つの背景画像が結合されています。背景サイズプロパティは、各背景画像のサイズを指定します。最初の画像は幅 30%、2 番目の画像は幅 40%、3 番目の画像はカバーです。バランスの取れた構図を作成するために、background-position プロパティは画像ごとに異なるように設定されます。