CSS プロパティ：background-size_html/css_WEB-ITnose

背景サイズ属性は、背景画像のサイズを指定するために使用されます。

背景画像は、要素の背景領域全体をカバーするように設定することも、CSS 作成者によって定義された明示的なサイズに設定することもできます。

cover キーワードを使用して、要素の背景領域全体を覆うように背景画像を設定できます。 contains キーワードを使用して、背景領域にできるだけ大きな背景画像を含めることもできます。これら 2 つのキーワードのいずれかが使用され、画像の寸法と比率が固定されている場合、画像の高さと幅の固有の比率が保持されます。

JPEG 画像など、一部の には固有の寸法や比率があり、たとえば、

などの他の画像には、特に指定されていない限り、固有の寸法や比率はありません。以下）、要素の背景領域のサイズを占めます。背景イメージの最終的なレンダリング サイズは、イメージに固有の寸法と比率があるかどうかによって異なります。

background-size: cover; /* keyword value */background-size: contain; /* keyword value */background-size: 100% 50%; /* pair of non-keyword values */background-size: 300px 200px; /* pair of non-keyword values */background-size: 50% auto; /* non-keyword value + the value 'auto' */

背景サイズ属性は、キーワード値 ( cover または contains )、または非キーワード値のペア ( | )、または値 auto を持つ非キーワード値を受け取ります。例:

2 つの値について、最初の値は画像の幅を指定し、2 番目の値は画像の高さを指定します。

キーワード以外の値が 1 つだけ指定されている場合、もう 1 つは auto とみなされます。

要素に複数の背景画像がある場合、background-size 属性にはカンマ区切りの値を指定することもできます。値は、対応する背景画像に適用されます (最初の値は最初の画像に対応し、2 番目の値は 2 番目の画像に対応するなど)。

次のインタラクティブなデモのケースでは、さまざまな背景サイズの値をクリックして背景レンダリングの変化を観察します:

メモ

CSS グラデーション (グラデーション) と組み合わせたもの背景サイズ属性を使用すると、興味深く創造的な背景パターンを作成できます。 Lea Verou の CSS3 Patterns ですべてのパターンを読むことができます。

公式構文

background-size: <bg-size> [ , <bg-size> ]*/* where */<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

構文

デフォルト値
• : auto
アプリケーションシナリオ
• : すべての要素
アニメーションのサポート

: はい、キーワード値を除く

属性値

の値は、指定された方向に背景画像を拡大縮小します。ここでは負の値を指定することはできません。

パーセンテージ値は、指定された背景領域内の指定されたパーセンテージ サイズに画像の背景を拡大縮小します。背景の指定された領域は、background-origin 属性値によって決まります。作成者がbackground-originプロパティの値を設定しない限り、このプロパティにはpadding-boxプロパティの値が設定されます。これは、背景画像が、背景画像の左上隅を中心とした背景座標系を基準にして配置されることを意味します。パディングボックス。ここでは負のパーセンテージ値は許可されません。

contains

固有のアスペクト比 (存在する場合) を維持しながら、画像の幅と高さが背景の指定された領域を満たすように画像を最大値まで拡大縮小します。背景画像に固有の比率や寸法がない場合は、指定された領域のサイズで背景がレンダリングされます。

cover

固有のアスペクト比 (存在する場合) を維持しながら、画像の幅と高さが背景の指定された領域を完全にカバーする最小サイズに画像を拡大縮小します。背景画像に固有の比率や寸法がない場合は、背景の指定された領域のサイズがレンダリングされます。

auto

auto キーワードを使用して、背景画像を対応する方向に拡大縮小し、固有の比率を維持します。
• 画像に 2 つの固有の寸法 (高さと幅) がある場合、画像は独自のサイズでレンダリングされます。
• 背景画像に固有の比率や寸法がない場合、背景の指定された領域のサイズでレンダリングされます。
• 画像に縦横比がなく、寸法がある場合、contain が指定されているかのようにレンダリングされます。
• 固有のサイズと比率がある場合は、そのサイズと比率に従ってレンダリングされます。

画像に固有の寸法があるがスケールがない場合、画像はその固有の寸法と、対応する背景の指定領域の寸法に従ってレンダリングされます。

Notes

background-size 属性の値が 1 組の値で、一方が auto であり、もう一方が または である場合、 :

• 如果图像具有固有比例: 使用 length/ percentage值在相应的维度中指定呈现图像的大小，然后使用图像的比例来计算其他维度的值。所以，例如，第一个值是 length,第二值为 auto，然后图像呈现的的宽度将按照其指定的 length，图像的高度将基于图像的比例。
• 如果图像没有固有的比例: 使用 length/ percentage值在相应的维度中指定呈现图像的大小。对于另一个方向 (其中值为 auto)，浏览器将使用图像的尺寸，当然前提是，存在的情况下。例如，一个 JPEG 图像有两个固有维度 (高度和宽度)，所以如果高度设置为一个 length值，宽度设置为 auto，浏览器将从图像中提取的宽度，并使用它，因为它有一个这个值。但是如果图像不具有固有的宽度 (例如 gradient(渐变))，浏览器也将呈现同一维度作为背景指定区域。

background-size属性也可以通过 inherit值，继承其父元素的值。例如: background-size: inherit.

案例

以下是所有有关 background-size属性的有效语法。

/* keyword value syntax */background-size: cover;background-size: contain;/* two-value syntax: first value specifies the width of the image and the second value specifies its height */background-size: 50% auto;background-size: 50px 30px;background-size: 10em 12em;/* one-value syntax: the second value is always assumed to be 'auto' */background-size: 32em;background-size: auto;background-size: 100%;

以下是用 background-size属性指定大小背景图像的所有实例。在此示例中的图像被假设为固有的尺寸和比例 (JPEG 图像，例如);

/* stretch the image to fill the background area ignoring image ratio */background-size: 100% 100%; /* the background image is shown at its intrinsic size */background-size: auto; /* default *//*  the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio */background-size: 3em; /* second value is assumed `auto` *//* this one forces the background image to be 15px by 15px */background-size: 15px 15px;

下面的示例有关图像拉伸的 (注意 background-repeat 属性和 background-origin 属性的值)。纵横比被保留了。

background-size: 50% auto;background-repeat: repeat;background-origin: border-box;

下面的示例指定两个背景图像的背景大小。第一个值指定第一个图像大小，第二个值指定第二个图像的大小。

background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);background-size: 100% 100%, contain;

下面的示例将强迫渐变图像的大小改变为 100px x 100px。

background: linear-gradient(left, white 50%, #8b0 50%);background-size: 100px 100px;

在线示例

更改以下演示中的 background-size属性的值，观察背景图像的呈现是如何改变的。

请您在更改值的同时，调整屏幕的大小，观察背景图像如何响应该元素的大小。