ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のサイズを設定する方法
CSSで背景画像のサイズを設定する方法
- 王林オリジナル
- 2021-05-18 15:46:019861ブラウズ
CSS で背景画像のサイズを設定する方法は、background-size 属性を背景画像に追加し、その属性値を必要な幅と高さに設定することです ([background-size:] など)。 80ピクセル60ピクセル;]。
background-size: length|percentage|cover|contain;属性値:
- length 背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定され、2 番目の値が auto に設定されている場合、
- percentage は背景の配置領域に対する相対的なパーセンテージを計算します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定された場合、2 番目の値は「自動」に設定されます。 #cover これにより、画像のアスペクト比が維持され、背景の位置を完全にカバーするように画像が拡大縮小されます。地域のサイズ。
- contain これにより、画像のアスペクト比が維持され、背景配置領域内に収まる最大サイズに画像が拡大縮小されます。
- 例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>実行結果:
関連する推奨事項:
以上がCSSで背景画像のサイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでカーソルの色を変更する方法次の記事：CSSでカーソルの色を変更する方法