【1日1個CSS3プロパティを学ぶ】その3：background-size_html/css

【1日1個CSS3プロパティを学ぶ】その3：background-size_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:37

オリジナル

1196 人が閲覧しました

MDN からの抜粋。時間の都合上、きちんと整理できなかったので、まずは引用して、時間があるときに詳しく整理していきたいと思います。

background-size 背景画像のサイズを設定します。

/* 关键字 */background-size: coverbackground-size: contain/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */background-size: 50%background-size: 3embackground-size: 12pxbackground-size: auto/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto/* 逗号分隔的多个值：设置多重背景 */background-size: auto, auto     /* 不同于background-size: auto auto */background-size: 50%, 25%, 25%background-size: 6px, auto, containbackground-size: inherit

ログイン後にコピー

Values

値は、背景画像のサイズを指定します。負の値にすることはできません。値は、背景配置領域に対する背景画像の割合を指定します。背景領域は、background-origin によって設定されます。これは、デフォルトでボックスモデルのコンテンツ領域とパディングに設定されます。また、コンテンツ領域のみに設定したり、境界線を含めたりすることもできます。アタッチメントが固定されている場合、背景領域はスクロールバーを除いたブラウザの表示領域 (つまり、ビューポート) になります。負の値は指定できません。背景画像に比例して背景画像を自動スケールします。 cover 背景領域を完全に覆うように背景画像を拡大縮小します。背景画像の一部が表示されない場合があります。 contains は、背景領域に完全に収まるように背景画像を拡大縮小します (部分的に空白になる場合もあります)。

ビットマップには固有の寸法と比率が必要ですが、ベクター画像には両方または 1 つだけが含まれる場合があります。グラデーションは、固有の寸法のみまたは固有の比率のみを持つ画像として扱われます。

背景画像サイズの計算:

背景サイズの 2 つの値が指定され、自動ではない場合: 背景画像は指定されたサイズに従ってレンダリングされます。包含またはカバー: 固有の比率を保持し、背景領域の包含または範囲を最大化します。画像に固有の比率がない場合、背景領域に応じてサイズが変更されます。 auto または auto auto: 画像に 2 つの長さがある場合は、このサイズを使用します。固有のサイズや比率がない場合は、背景領域のサイズが使用されます。固有のサイズがなく、固有の比率がある場合、その効果は含むと同じです。長さと比率がある場合は、その長さと比率からサイズが計算されます。長さはあるがスケールがない場合は、背景領域に対応する長さが使用されます。 1 つは自動で、もう 1 つは自動ではありません。画像に固有の比率がある場合、指定された長さには指定された値が使用され、指定されていない長さは指定された値と固有の比率から計算されます。画像に固有の比率がない場合、指定された長さには指定された値が使用され、指定されていない長さには画像の対応する固有の長さが使用されます。固有の長さが存在しない場合は、背景領域の対応する長さが使用されます。

すべてのブラウザが固有の寸法や比率を持たないベクター画像をサポートしているわけではないことに注意してください。違いが許容できるかどうかを判断するために、Firefox 7 以降と Firefox 8 以降のテストには特に注意してください。

例

background-size: coverデモとbackground-size: containsデモが新しいウィンドウで開くので、背景領域のサイズが変化したときにcontainとcoverがどのように見えるかを確認できます。一連のデモンストレーション:background-size と、background-* 属性との関連。background-size を単独で使用する場合と、他の属性と組み合わせて使用する場合を示します。

注意事項

背景としてグラデーションを使用し、背景サイズを使用する場合は、自動を 1 つだけ使用しないこと、または幅の値 (たとえば、背景サイズ: 50%) のみを指定することをお勧めします。 Firefox 8 はこれら 2 つの状況で変更されており、各ブラウザの現在のパフォーマンスは一貫していません。すべてのブラウザが CSS3 の背景サイズ仕様と CSS3 画像値のグラデーション仕様を完全にサポートしているわけではありません。

.bar {       width: 50px; height: 100px;       background-image: gradient(...);       /* 不推荐 */       background-size: 25px;       background-size: 50%;       background-size: auto 50px;       background-size: auto 50%;       /* 可行 */       background-size: 25px 50px;       background-size: 50% 50%;}

ログイン後にコピー

Firefox 8 より前では再レンダリングできず、Firefox 8 のレンダリング機能を実装していないブラウザの場合、要素の正確なサイズが指定された背景は不明です。

IE9 以降でのみサポートされます。