ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のサイズを設定する方法
CSSで背景画像のサイズを設定する方法
- 青灯夜游オリジナル
- 2021-03-31 16:35:3512808ブラウズ
CSS では、background-size 属性を使用して背景画像のサイズを設定できます。構文形式は "background-size:length|%|cover|contain;" で、デフォルト値は "オート」。
このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。
css 背景画像サイズの設定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/1.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="img/1.jpg" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>レンダリング:
[推奨チュートリアル: CSS ビデオチュートリアル]
css 背景サイズ属性
背景サイズ属性は、背景画像のサイズを指定します。
background-size: length|percentage|cover|contain;
| 説明 | |
|---|---|
| 背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定された場合、2 番目の値は | auto(automatic) |
| に設定され、バックグラウンドの割合。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定された場合、2 番目の値は「auto」に設定されます。 | |
| 画像のアスペクト比は維持され、画像は拡大縮小されます。背景配置領域を完全にカバーする最小サイズ。 | |
| 画像のアスペクト比は維持され、画像は背景配置領域に収まる最大サイズに拡大縮小されます。 |
以上がCSSで背景画像のサイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSセレクターとは何ですか次の記事：CSSセレクターとは何ですか