ホームページ > 記事 > ウェブフロントエンド > 背景サイズ属性の使用方法
背景サイズ属性の使用方法
- 青灯夜游オリジナル
- 2019-01-30 14:06:2210479ブラウズ
background-size 属性は、背景画像のサイズを設定するために使用されます。画像のサイズは長さの値またはパーセンテージで設定することも、画像をカバーおよび含めて拡大縮小することもできます。
#CSS 背景サイズ属性
機能: 背景画像のサイズを指定します。 注: CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まりました。 CSS3では背景画像のサイズを指定できるため、さまざまな環境で背景画像を再利用することができます。 文法:background-size: length|percentage|cover|contain;
| 説明 | |
| 背景画像の高さと幅を設定します。 最初の値は幅を設定し、2 番目の値は高さを設定します。 値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。 | |
| 背景画像の幅と高さを親要素のパーセンテージとして設定します。 最初の値は幅を設定し、2 番目の値は高さを設定します。 値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。 | |
| 背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。 背景画像の一部が背景配置領域に表示されない場合があります。 | |
| イメージ画像を最大サイズまで拡大し、幅と高さがコンテンツ領域に完全に収まるようにします。 |
#CSS 背景サイズ プロパティの使用例<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p>
</body>
</html>レンダリング:
#以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！ 
以上が背景サイズ属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。