ホームページ > 記事 > ウェブフロントエンド > CSSのbackground-size属性の使い方
CSSのbackground-size属性の使い方
- 藏色散人オリジナル
- 2019-05-29 10:47:294500ブラウズ
cssのbackground-size属性で背景画像のサイズを設定できます。構文:background-size: length|percentage|cover|contain; 長さの値またはパーセンテージを使用して画像サイズを設定するか、カバーと含めて画像を拡大縮小します。
CSS の背景サイズ属性を使用するにはどうすればよいですか?
機能: 背景画像のサイズを指定します。
構文:
background-size: length|percentage|cover|contain;
説明:
length 背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。パーセントは、背景画像の幅と高さを親要素のパーセンテージとして設定します。
最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。 cover 背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。背景画像の一部が背景アンカー領域に表示されない場合があります。 contains 画像を最大サイズまで拡張し、幅と高さがコンテンツ領域内に完全に収まるようにします。
注: IE9、Firefox 4、Opera、Chrome、Safari 5 は、background-size 属性をサポートしています。
css 背景サイズ プロパティの使用例
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>効果の出力:
以上がCSSのbackground-size属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。