ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のサイズを設定する方法

CSSで背景画像のサイズを設定する方法

青灯夜游オリジナル: 2021-04-21 15:29:4422604ブラウズ

CSS では、background-size 属性を使用して、背景画像のサイズを設定できます。この属性では、背景画像のサイズを指定できます。構文形式は、「background-size: 長さを含む数値」です。単位 | パーセンテージ値 | カバー | を含む ;"。

CSSで背景画像のサイズを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、background-size 属性を使用して背景画像のサイズを設定できます。背景画像は長さの値またはパーセンテージで表示でき、カバーを通して画像を拡大縮小したり、背景画像を含めたりすることもできます。。 #

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

属性値:

値説明#percentage 背景画像の幅と高さを親要素のパーセンテージとして設定します。 cover背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。 contain コード例:


length	背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。
	最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。
	背景画像の一部が背景配置領域に表示されない場合があります。
イメージ画像を最大サイズまで拡張し、幅と高さがコンテンツ領域に完全に収まるようにします。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/5.jpg);
				background-size: 100px 100px;
				-moz-background-size: 100px 100px;
				/* 老版本的 Firefox */
				background-repeat: no-repeat;
				padding-top: 80px;
			}
		</style>
	</head>

	<body>
		<p>上面是缩小的背景图片。</p>

		<p>原始图片：<br />
			<img src="img/5.jpg" alt="Flowers"></p>

	</body>

</html>

エフェクト画像:

CSSで背景画像のサイズを設定する方法 (学習ビデオの共有:

CSS ビデオチュートリアル

)

以上がCSSで背景画像のサイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：入力から枠線を削除する方法次の記事：入力から枠線を削除する方法

続きを見る