検索

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

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

青灯夜游
青灯夜游オリジナル
2021-04-14 18:04:0112077ブラウズ

CSS で背景画像のサイズを設定するには、background-size 属性を使用できます。構文は、「background-size: value |percentage | cover | contains;」です。ここで、cover は、画像の比例拡大を表します。要素を埋める画像。要素の寸法に合わせて比例的に画像を縮小します。

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

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

#css3 背景画像のサイズを設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
	background:url(img_flwr.gif);
	background-size:80px 60px;
	background-repeat:no-repeat;
	padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

<p>原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224"    style="max-width:90%"></p>

</body>
</html>

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

##css3 背景サイズ属性

background-size 属性は背景画像のサイズを指定します。これは Firefox、Chrome、IE9 で使用できます。

具体的な使い方は以下の通りです。

    背景画像サイズ(数値表現): 

  • #background-size{ 
background-size:200px 100px; 
}
    背景画像サイズ (パーセンテージ表現): 

  • #background-size2{ 
background-size:30% 60%; 
}
    背景画像サイズ (要素を埋めるように画像を比例的に拡大する、つまりカバー値): 

  • #background-size3{ 
background-size:cover; 
}
    背景画像のサイズ (要素のサイズ、つまり含まれる値に合わせて画像を比例的に縮小します): 

  • #background-size4{ 
background-size:contain; 
}
    背景画像のサイズ (要素に画像自体のサイズ、つまり自動値を入力します): 

  • #background-size5{ 
background-size:auto; 
}

    (学習ビデオの共有:
    • css ビデオ チュートリアル
)

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

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

関連記事

続きを見る