cssの背景サイズプロパティ
翻訳結果:
背景
UK[ˈbækgraʊnd] US[ˈbækˌɡraʊnd]
n. (絵画など) 背景; 背景色; 背景情報; サウンドトラック
複数形:backgrounds
size
## English[saɪz] 美[saɪz] n. スケール; サイズ、サイズ; 接着剤、ペースト Paste ; 巨大な、大きな数 vt. サイズ順に配置する; サイズを変更する; 接着剤を適用する、サイズを調整する; ペイントを適用する adj. 特定のサイズの三人称単数 : サイズ 複数形: サイズ 現在分詞: サイズ過去形: サイズ過去分詞: サイズcssの背景サイズプロパティ構文
background-size 属性を使用するにはどうすればよいですか?
background-size 属性は、背景画像のサイズを設定できます。構文:background-size: length|percentage|cover|contain; 長さの値またはパーセンテージを使用して画像サイズを設定するか、カバーと含めて画像を拡大縮小します。
機能: 背景画像のサイズを指定します。
構文: background-size: length|percentage|cover|contain;
説明: length 高さと合計を設定します。背景画像の幅。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。パーセントは、背景画像の幅と高さを親要素のパーセンテージとして設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。 cover 背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。背景画像の一部が背景アンカー領域に表示されない場合があります。 contains 画像を最大サイズまで拡張し、幅と高さがコンテンツ領域内に完全に収まるようにします。
注: IE9、Firefox 4、Opera、Chrome、Safari 5 は、background-size 属性をサポートしています。
cssの背景サイズプロパティ例
<!DOCTYPE html> <html> <head> <style> body { background:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg'); background-size:100px 63px; -moz-background-size:100px 63px; /* 老版本的 Firefox */ background-repeat:no-repeat; padding-top:80px; } </style> </head> <body> <p>上面是缩小的背景图片。</p> <p>原始图片:<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p> </body> </html>
インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します