Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "CSS3 attribute background-size how to use", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "CSS3 attribute background-size how to use" this article.

Background-size sets the background image size.

Copy the code

The code is as follows:

/ * keyword * /

Background-size: cover

Background-size: contain

/ * A value: this value specifies the width of the picture, and the height of the picture is implicitly auto * /

Background-size: 50%

Background-size: 3em

Background-size: 12px

Background-size: auto

/ * two values: the first value specifies the width of the picture, and the second value specifies the height of the picture * /

Background-size: 50% auto

Background-size: 3em 25%

Background-size: auto 6px

Background-size: auto auto

/ * multiple values separated by commas: set multiple backgrounds * /

Background-size: auto, auto / * is different from background-size: auto auto * /

Background-size: 50%, 25%, 25%

Background-size: 6px, auto, contain

Background-size: inherit

Values

Value that specifies the size of the background picture and cannot be negative.

Value that specifies the percentage of the background picture relative to the background area (background positioning area). The background area is set by background-origin, which defaults to the content area and inner margin of the box model, or can be set to only the content area, or it also includes a border. If attachment is fixed, the background area is the browser visual area (that is, the viewport), excluding the scroll bar. Cannot be negative.

Auto

Scale the background picture to the ratio of the background picture.

Cover

Zoom the background image to completely cover the background area, and the background picture may not be visible.

Contain

Zoom the background picture to fully load the background area, which may be partially blank.

A bitmap must have an inherent size and inherent scale, and a vector map may have both or only one. A gradient is regarded as a picture with only inherent size or only inherent scale.

Background image size calculation:

If two values of background-size are specified and are not auto:

The background picture is rendered at the specified size.

Contain or cover:

Retain the inherent proportion, the largest contains or covers the background area. If the image has no inherent scale, press the size of the background area.

Auto or auto auto:

If the image has two lengths, press this size. If there is no inherent size and inherent ratio, then press the size of the background area. If there is no inherent size but inherent proportion, the effect is the same as contain. If there is a length and scale, the size is calculated from this length and scale. If there is a length but no scale, the length corresponding to the background area is used.

One is auto and the other is not auto:

If the image has an inherent scale, the specified length uses the specified value, and the unspecified length is calculated by the specified value and the natural ratio. If the image has no inherent scale, the specified length uses the specified value, the unspecified length uses the corresponding inherent length of the image, and if there is no inherent length, the corresponding length of the background area is used.

Note that not all browsers support vector graphics without inherent size or scale. Pay special attention to testing Firefox 7-and Firefox 8 to determine whether the differences are acceptable.

Examples

The background-size: cover demo and the background-size: contain demo open in a new window so you can see how contain and cover look when the size of the background area changes. Series of demos: background-size and its association with the background-* property well illustrate the use of background-size alone and in conjunction with other properties.

Notes

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

Copy the code

The code is as follows:

.bar {

Width: 50px; height: 100px

Background-image: gradient (...)

/ * not recommended * /

Background-size: 25px

Background-size: 50%

Background-size: auto 50px

Background-size: auto 50%

/ * feasible * /

Background-size: 25px 50px

Background-size: 50%

}

It is not recommended to use px with auto for gradients, because you cannot render repeatedly before Firefox 8, and for browsers that do not implement Firefox 8 rendering features, you do not know the exact size of the elements that specify the background.

Only supported by IE9 or above.

The above is all the content of the article "how to use CSS3 attribute background-size". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.