Detailed introduction to background related properties

background-origin: Specifies which part of the container the background-position attribute is positioned relative to.

　padding-box Background image Positioned relative to the Padding box; (Default)

　b order-box background image is positioned relative to the border box;

content-box background image is positioned relative to the content box.

background-position: Set the starting position of the background image displayed in the container.

Default value: 0 0 (displayed from the upper left point of the background image);

Value: Int px Int px; the upper left fixed point of the background image is at the coordinate position of the container, which can be negative value. A negative value means that the upper left point of the background image is not within the container, and the beyond part is hidden.

If only one value is set, the other value will be "centered" (50%/center)

If a percentage is used, the coordinates are calculated according to the following formula:

x (Width of the container - width of the background picture ) * x percentage, the excess part is hidden; y (height of the container - height of the background image) * y percentage, the excess part is hidden.

So left/top is equivalent to 0%, right/bottom is equivalent to 100% (background The right/bottom edge of the image coincides with the container), center is equivalent to 50% (the background image is in the middle of the container).

background-size: Set the size of the background image (IE8 does not support this attribute)

Percent/length: If it is a percentage, the size of the background image is multiplied by the container The product of percentages. Set only one, and set the second one to auto (to maintain the same aspect ratio as the original background image).

If both are set to 100%, the background image will fill the container, but the aspect ratio will change.

contain: The container contains the entire background image according to a fixed proportion of the background image. The size of the background image is enlarged according to a fixed proportion of the background image. Until any one side reaches the boundary of the container, the other side will often be blank (when there is no-repeat).

Cover: The background image is enlarged according to a fixed aspect ratio until it fills the entire container (the shorter side of the background image also reaches the container boundary). Part of the background image will be cut off because it exceeds the container.

IE8 compatible:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='absolute path',sizingMethod='scale/crop');

Crop: The size of the background image remains unchanged, and the image is cut to fit the area size.

Image: Default value. Increase or reduce the size boundary of the area to adapt to the size of the background image, which is equivalent to overflow: visible effect.

Scale: Scale the background image to fit the size boundaries of the area.

　①Cannot specify any size background percentage②Only suitable for a single picture and cannot use picture sprites and other puzzles③Mustciteabsolute path picture④Compatible with ie7, 8

or above All are based on personal understanding. If there are any errors, please leave a message to correct them.

The above is the detailed content of Detailed introduction to background related properties. For more information, please follow other related articles on the PHP Chinese website!