cssで背景サイズを設定する-フロントエンドQ&A-php.cn

Hello World!

ホームページ

ウェブフロントエンド

フロントエンドQ&A

cssで背景サイズを設定する

王林

May 21, 2023 pm 12:10 PM

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 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

ログイン後にコピー

上記のコードでは、Lorem Picsum によって提供されたランダムな画像を背景として使用します。 CSS では、背景画像を背景領域全体に広げます。その効果は次のとおりです。

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 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

ログイン後にコピー

上記のコードでは、背景としてランダムな画像も使用しています。 CSS では、contain 属性を使用して、画像が引き伸ばされず、背景領域のできるだけ中央に表示されるようにします。効果は次のとおりです。

cssで背景サイズを設定する

#画像効果からわかるように、画像が背景領域を完全にカバーすることはできませんが、デザイン全体のバランスが良くなりました。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: 600px;
}
</style>
</head>
<body>

<h1 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

ログイン後にコピー

上記のコードでは、背景としてランダムな画像も使用しています。 CSS では、600 ピクセルサイズの固定値設定が使用され、その効果は次のようになります。

cssで背景サイズを設定する

ご覧のとおり、画像サイズは 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 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

ログイン後にコピー

上記のコードでは、中央の位置を設定しており、その効果は次のとおりです。

cssで背景サイズを設定する