CSS background-position随笔_html/css_WEB-ITnose

1. Definition and usage

The background-position property sets the starting position of the background image.

This attribute sets the position of the original background image (defined by background-image ). If the background image is to be repeated, it will start from this point.

Tip: You need to set the background-attachment property to "fixed" to ensure that this property works properly in Firefox and Opera.

默认值： 继承性： 版本： JavaScript 语法：

0% 0%

no

CSS1

object.style.backgroundPosition="center"

2. Possible values

Value description

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

值 描述

top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。

If you specify only one keyword, the second value will be "center".

Default: 0% 0%.

x% y%

The first value is the horizontal position and the second value is the vertical position.

The upper left corner is 0% 0%. The lower right corner is 100% 100%.

If you specify only one value, the other value will be 50%.

xpos ypos

The first value is the horizontal position and the second value is the vertical position.

The upper left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit.

If you specify only one value, the other value will be 50%.

You can mix % and position values.

3. Example operation:

html css code:

Rendering effect:

1. When background-position:-110px -70px;

Rendering:

That is, the image is shifted 70px up and 110px to the left;

2. When background-position: 10px 10px;

Effect picture:

That is, move 10px to the right and 10px down;

3.background-position:100% 100%;

Rendering:

The image is in the lower right corner of the container element, which has the same effect as background-position:right bottom;.

Equivalent to x: {width of container (container)?width of background image}*x percentage, the excess part is hidden. That is, 50px to the right

is equivalent to y: {height of container (container)? height of background image}*y percentage, and the excess part is hidden. That is, 185px downward;

4.background-position:50% 50%;

Rendering:

The picture is centered horizontally and vertically. It has the same effect as background-position:center center;.

Equivalent to x: {width of container (container)?width of background image}*x percentage, the excess part is hidden.

Equivalent to y: {height of container (container)? height of background image}*y percentage, the excess part is hidden.

5.background-position:-50% -50%;

Rendering:

Equivalent to x: -{container (container) The width? The width of the background image}*x percentage, and the excess part is hidden. That is, moved 25px to the left;

is equivalent to y: - {height of container (container)? height of background image}*y percentage, and the excess part is hidden. That is, moved up 92.5px;

6.background-position:-100% -100%;

Rendering:

Equivalent to x: -{width of container (container)?width of background image}*x percentage, the excess part is hidden. That is, moved 50px to the left;

is equivalent to y: - {height of container (container)? height of background image}*y percentage, and the excess part is hidden. That is, it has moved up 185px;

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.