背景サイズ属性の使用方法-CSSチュートリアル-php.cn

背景サイズ属性の使用方法

青灯夜游

リリース： 2019-01-30 14:06:22

オリジナル

10485 人が閲覧しました

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

背景サイズ属性の使用方法

#CSS 背景サイズ属性

機能: 背景画像のサイズを指定します。

注: CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まりました。 CSS3では背景画像のサイズを指定できるため、さまざまな環境で背景画像を再利用することができます。

文法:

background-size: length|percentage|cover|contain;

ログイン後にコピー

値説明長さ percentage covercontain イメージ画像を最大サイズまで拡大し、幅と高さがコンテンツ領域に完全に収まるようにします。


	背景画像の高さと幅を設定します。最初の値は幅を設定し、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 サイトの他の関連記事を参照してください。