[Learn one CSS3 property a day] Part 3: background-size_html/css_WEB-ITnose

Excerpted from MDN. Due to time reasons, I couldn't organize my study properly. I will quote it first and then organize it in detail when I have time.

background-size sets the background image 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

Values ​​specify the size of the background image and cannot be negative. value specifies the percentage of the background image relative to the background positioning area. The background area is set by background-origin, which defaults to the content area and padding of the box model. It can also be set to only the content area, or also include borders. If attachment is fixed, the background area is the browser's visible area (i.e., the viewport), excluding scroll bars. Cannot be a negative value. auto scales the background image in proportion to the background image. cover Scales the background image to completely cover the background area. Parts of the background image may not be visible. contain scales the background image to fit completely into the background area, which may be partially blank.

Bitmaps must have inherent dimensions and proportions, while vector images may have both or only one. Gradient is treated as an image with only intrinsic dimensions or only intrinsic proportions.

Background image size calculation:

If two values ​​of background-size are specified and it is not auto: the background image is rendered at the specified size. contain or cover: retain the inherent proportions and maximize the inclusion or coverage of the background area. If the image has no inherent proportions, it is sized according to the background area. auto or auto auto: If the image has two lengths, use this size. If there is no inherent size or proportion, the size of the background area is used. If there is no intrinsic size but an intrinsic proportion, the effect is the same as contain. If there is a length and ratio, the size is calculated from this length and ratio. If there is a length but no scale, then the length corresponding to the background area is used. One is auto and the other is not auto: If the image has intrinsic proportions, the specified length uses the specified value, and the unspecified length is calculated from the specified value and the intrinsic proportion. If the image does not have an intrinsic proportion, the specified length uses the specified value, and the unspecified length uses the corresponding intrinsic length of the image. If there is no intrinsic length, the corresponding length of the background area is used.

Note that not all browsers support vector graphics that do not have inherent dimensions or proportions. Pay special attention to testing Firefox 7- vs. Firefox 8 to determine whether the differences are acceptable.

Examples

background-size: cover demo and background-size: contain demo opens in a new window, so you can see when the size of the background area changes, contain and What does cover look like? A series of demonstrations: background-size and its association with the background-* attributes illustrates the use of background-size alone and in conjunction with other attributes.

Notes

If you use a gradient as the background and use background-size on it, it is best not to use only one auto, or only specify a width value (for example, background-size: 50%) . Firefox 8 has changed in these two situations, and the current performance of each browser is inconsistent. Not all browsers fully support the CSS3 background-size specification and the CSS3 Image Values ​​gradient specification.

.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%;}

It is especially not recommended to use gradient px with auto, because it cannot be re-rendered before Firefox 8, and for browsers that do not implement Firefox 8 rendering features, I don’t know how to specify it. The exact size of the background's elements.

Only supported by IE9 and above.