CSS3: 背景サイズ 背景画像サイズattribute_html/css_WEB-ITnose

background-size は背景画像のサイズを設定できます。値には長さとパーセンテージが含まれます。 また、画像がカバーする範囲は背景の原点位置background-originに応じて設定されます。それでは、この背景サイズ属性について一緒に学びましょう。

背景サイズの構文

背景サイズの w3c 構文は次のとおりです:

background-size* ここでbg -size = [ ]{1,2} を含む 適用対象: 構文の説明 1. 長さ、指定された長さに応じたパーセンテージ背景画像のサイズを変更するための値またはパーセント。 auto はデフォルト値です。これら 3 つの値は少なくとも 1 回、最大で 2 回繰り返すことができます。これらの値については次の説明があります: 最初の値は画像の幅を設定し、2 番目の値は画像の高さを設定しますが、どの値を使用しても負の値にすることはできません パーセント値が指定されている場合、背景画像のサイズは、background-origin によって決定される相対的な背景領域に従って調整されます。これについては、絵の起源に関する議論で前述しました。ここで、background-attachment:fixed の場合、背景の相対領域が最初の包含ブロック、つまりウィンドウであることに言及する必要があります。

/* 一个值: 这个值指定图片的宽度，那么第二个值为auto */background-size: autobackground-size: 50%background-size: 3embackground-size: 12px/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto/*多重背景，请用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但是必须用逗号隔开。 */background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */background-size: 50%, 25%, 25%background-size: 6px, auto, containbackground-size: inherit                       <ol>                                                     <li> 1 </li>                                <li> 2 </li>                                <li> 3 </li>                                <li> 4 </li>                                <li> 5 </li>                                <li> 6 </li>                                <li> 7 </li>                                <li> 8 </li>                                <li> 9 </li>                                <li> 10 </li>                                <li> 11 </li>                                <li> 12 </li>                                <li> 13 </li>                                <li> 14 </li>                                <li> 15 </li>                                <li> 16 </li>                                <li> 17 </li>                                <li> 18 </li>                                <li> 19 </li>                                <li> 20 </li>                       </ol>

コード レイコード - v1.1

	属性値:
継承:	なし
パーセンテージ:	以下の注を参照
計算値:	指定通り
1 つだけの場合。値が指定されている場合、2 番目の値は自動的に 'auto' になります。

2. 画像の縦横比が要素全体の背景領域の縦横比に適応するように、背景画像を比例的に調整します。 したがって、指定された画像サイズが大きすぎると背景が表示される 領域全体の幅と高さが背景画像を正確に含まない場合、背景の一部の領域が空白になる可能性があります。次のコードを見てください

rrree コード レイコード - v1.1 画像が要素の幅または高さを適応的にカバーする場合、要素内に空白スペース、つまり画像内の赤い枠ができます。空白スペースを示します。

2. カバー、背景画像を比例的に調整します。この属性値は、例に従って、背景画像が背景領域全体を適応的にカバーします。背景領域が背景画像を含めるのに十分な大きさではない場合、背景画像をクリックします。

.im-com{    width:200px;    height:50px;        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440，而元素相对区域高度为50*/     background-size:contain;}.im-com-1{    width:50px;    height:100px;       background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/     background-size:contain;}                       <ol>                                                     <li> 1 </li>                                <li> 2 </li>                                <li> 3 </li>                                <li> 4 </li>                                <li> 5 </li>                                <li> 6 </li>                                <li> 7 </li>                                <li> 8 </li>                                <li> 9 </li>                                <li> 10 </li>                                <li> 11 </li>                                <li> 12 </li>                                <li> 13 </li>                                <li> 14 </li>                                <li> 15 </li>                                <li> 16 </li>                       </ol>

コード レイコード - v1.1
cover の値を使用すると、contain の逆になります。背景の相対領域全体をカバーしますが、背景画像の一部が表示されなくなります。下の写真の犬 下半身と右側が完全に表示されていません。
背景画像の計算値について話しましょう

単一の値または特定の値を使用して説明する場合は、理解するのは難しくありませんが、混合した長さを使用して説明すると、理解が難しくなる可能性があります一度に理解するのは少し難しいかもしれません。

仕様にはいくつかの例が示されていますが、それらを取り出してもよいでしょう: 最初に宣言するため、要素のサイズは 100*100 になります

.im-com{    width:200px;    height:50px;        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440，而元素相对区域高度为50*/     background-size:cover;}.im-com-1{    width:50px;    height:100px;       background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/     background-size:cover;}                       <ol>                                                     <li> 1 </li>                                <li> 2 </li>                                <li> 3 </li>                                <li> 4 </li>                                <li> 5 </li>                                <li> 6 </li>                                <li> 7 </li>                                <li> 8 </li>                                <li> 9 </li>                                <li> 10 </li>                                <li> 11 </li>                                <li> 12 </li>                                <li> 13 </li>                                <li> 14 </li>                                <li> 15 </li>                                <li> 16 </li>                       </ol>

コードのレイコード - v1.1

MND ヘルプ ドキュメントでは、 Firefox のグラデーション画像の背景についての質問ですが、Firefox 8 に関係します。8 より前の Firefox ブラウザは繰り返しレンダリングをサポートしていないため、仕様では px と auto を同時に使用することを推奨していませんが、caniuse で見たバージョンは 31+ なので、やりたいことは何でもできます 使ってください。また、モバイル ブラウザのサポートは依然として非常に良好です。opera8 がサポートされていないことを除いて、以下の図を参照してください:

アプリケーション シナリオ

現在、background-size を使用するシナリオはすべて、背景画像に基づいています。 webapp では、一般的な状況として、たとえば、最も一般的なロゴが特定の要素の背景として使用されていますが、そのロゴは非常に複雑です。設計図に従ってスライスすると、次の 2 つの可能性があります。

1.たとえば、高さが 50 ピクセルで、ロゴが 50 ピクセルに直接拡大縮小された場合、非常にぎこちなくなり、おそらく画像はあまりにも美しいため、見たくなくなるでしょう

2.撮影ウェットデザインの解像度に応じて、それは可能です。デザイン図面のロゴのサイズは非常に大きくなりますが、csserを記述するときの高さは50ピクセルしかないため、ロゴは完全に表示されません。現時点では、background-size が重要な役割を果たします。美観に影響を与えずに背景画像のサイズをカスタマイズし、必要な効果をすべて表示できます。

携帯電話を捨ててください。 。 。 ↓

?

参考文献:

http://dev.w3.org/csswg/css-backgrounds/#background-size

https://developer.mozilla.org/en-US/docs/Web/ CSS /background-size#メモ