ホームページ > 記事 > ウェブフロントエンド > cssで背景サイズを設定する
cssで背景サイズを設定する
- 王林オリジナル
- 2023-05-21 12:10:077155ブラウズ
CSS は Web デザインとレイアウトに使用される言語で、背景サイズの設定を含むさまざまなスタイルや効果を実現できます。背景サイズとは、Web ページが読み込まれたときの背景画像のサイズと表示モードを指します。背景サイズを適切に設定すると、Web ページの美しさが向上するだけでなく、ユーザー エクスペリエンスも向上します。次にCSSを使って背景サイズを設定する方法を詳しく説明します。
1.background-size 属性を使用する
background-size 属性は、背景サイズを設定するために使用されます。背景画像のサイズと表示モードを指定できます。一般的に使用される値は、cover、contain、px の 3 つです。具体的には、それぞれ次のことを表します。
- cover: 背景画像が常に背景領域全体を覆うようにします。ただし、画像が背景領域より小さい場合、画像は自動的に引き伸ばされるか拡大されます。背景領域全体をカバーします。
- contain: 背景画像を元のサイズを維持しながら、引き伸ばさずにできるだけ背景領域の中央に表示します。
- px: 背景画像のサイズを直接指定します。固定値、パーセンテージ、またはキーワード auto を指定できます。auto は元のサイズを表します。
以下では、いくつかの例を使用して、background-size 属性の使用方法を示します。
- cover
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>上記のコードでは、Lorem Picsum によって提供されたランダムな画像を背景として使用します。 CSS では、背景画像を背景領域全体に広げます。その効果は次のとおりです。
ご覧のとおり、画像の高さは引き伸ばされていますが、横幅もたっぷりあるので背景全体がより美しく見えます。
- contain
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: contain;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>上記のコードでは、背景としてランダムな画像も使用しています。 CSS では、contain 属性を使用して、画像が引き伸ばされず、背景領域のできるだけ中央に表示されるようにします。効果は次のとおりです。
#画像効果からわかるように、画像が背景領域を完全にカバーすることはできませんが、デザイン全体のバランスが良くなりました。
- px
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: 600px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>上記のコードでは、背景としてランダムな画像も使用しています。 CSS では、600 ピクセル サイズの固定値設定が使用され、その効果は次のようになります。
ご覧のとおり、画像サイズは 600 ピクセルに制限されているため、背景領域全体が空白のままになります。したがって、px 値を使用して背景サイズを設定する場合は、背景画像のサイズがページ全体と調和するように、状況に応じて調整する必要があります。
2.background-position 属性を使用する
background-size 属性に加えて、background-position 属性を使用して背景の位置を設定することもできます。このプロパティを使用すると、対応するオフセットを使用して、背景画像を背景領域内で水平方向または垂直方向の中央に配置できます。具体的な使用法は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>上記のコードでは、中央の位置を設定しており、その効果は次のとおりです。
As you canレンダリングから見ると、中央に配置されています。整列された位置は画像の中心と一致しており、視覚効果は非常に優れています。
3. まとめ
以上はCSSを使って背景サイズを設定する方法についてです。実際の開発では、ユーザーエクスペリエンスとページ全体の美しさに重点を置くことが最も重要です。背景を適切に設定することで、Web ページをより魅力的にし、より優れたデザイン効果を実現できます。
以上がcssで背景サイズを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。