Detailed description of Div + CSS background image location and Image Retrieval

When studying the styles of other websites, we often find that the same image is called in many background attributes to meet the needs of each part of the webpage. Open this image and you will find that this image contains many small images, such:

Another example:

These small images are the parts after the entire graph is split, and each part is placed on an image instead of separately stored as a separate image. We all know that the purpose is to reduce the number of HTTP requests and saveTimeAnd bandwidth.

So how can we achieve a picture to show only a part of it in different places? This uses the problem of locating the background image we are going to talk about today. I believe many people are depressed about this problem, and some people often ask me this question.SystemAbout:

We know that CSS should be written like this when using images as the background. For example, the DIV container can also be the background of body, TD, P, etc. The truth is the same.

Code:

Div {Background: # fff URL (image) No-repeat fixed x y ;}

The attribute values of background are as follows:

# Fff background color: (color value, which indicates the background color when the background image is not covered or does not have a background image)
Image background image: (here is the image address)
No-repeat: (the image is smaller than the container's size. By default, the image is arranged repeatedly to fill the container. No-repeat indicates that the image is not repeated. Only the positioning coordinates after this time can be used .)
Whether the fixed background is scrolled with the container: (two optional values are available, scroll, and fixed is not scroll. The default value is scroll)
Location of x y background image: (Note that it is meaningful only when no-repeat is located. This is the focus of today's speech)

In Background Image Positioning, we need to clarify the following points:

1. The first two values are the horizontal positioning, which is called the x-axis positioning. The next value is vertical positioning, which is called orientation in the Y axis. If there is only one value, the default value is the X axis direction. In this case, the Y axis direction defaults to the upper and lower center alignment, that is, the center.
2. The origin of the coordinate axis is the left vertex of the corresponding container.
3. the Y axis arrow of the coordinate is down, that is, the value of x y in the lower right corner (inside the container) is positive.
4. x y indicates the value of the Left vertex of the background image relative to the coordinate origin (that is, the left vertex of the container.
5. The value of x y can be expressed by percentage or PX.
6. x y can also be expressed using the "Left, right, top, bottom, center" alignment, but note: when "Left, right, top, bottom, center" is used,ApplicationThe alignment rule is not the coordinate rule. If X is left, it indicates the alignment between the left side of the image and the left side of the container. If it is right, it indicates the right side of the image and the right side of the container, if y is set to top, the image top is aligned with the container top. If bottom is set to bottom, the image bottom is aligned with the container bottom. If x y is set to center, the image center is aligned.
7. When x Y is expressed as a percentage or PX, its value can be negative. By applying the coordinate rules, we can easily understand the meaning of negative numbers. when X is negative, it indicates that the Left vertex of the image is on the left of the Left vertex of the container, if y is negative, the left vertex of the image is above the left vertex of the container. That is, the left and upward directions are beyond the container range.

Below I will use several icons to illustrate the following situations: Blue blocks represent images, and dotted boxes represent containers (DIV, TD, or body ), note that only the background image can be seen in the container. I use white to indicate the visible part, and what is beyond the container range is invisible. I use Gray to indicate it. The coordinates of the left point of the container are (0, 0 ).

First, align the upper left corner of the background image with the volume. 0px 0px can also be written as Left top.

Second, the background image is in the middle of the container, and the fixed point coordinates are positive.

Third, the background image is in the upper left corner of the container, and the coordinate of the fixed point is negative.

---------------------------------------------------------------------------

At this point, we may understand how to use the positioning value in the background to accurately locate a background image, and return to the two pictures we introduced at the beginning. We can use them: the background orientation and container are visible to call a part of the entire image at will.

However, for the convenience of calling, we should pay attention to some rules when arranging these small images. For example, the distance between small images is usually the size of the container that calls the small image, or the distance is a little greater, in this way, we can avoid displaying images that we do not want to display in the container!

In addition, if the percentage is used for positioning,AlgorithmSpecial. For example:

Code:

Background: # fff URL (image) No-repeat fixed 50%-30%;

In this case, where should the image be located? The algorithm formula is as follows:

The Coordinate Position of the Left vertex of the image from the left vertex of the container is
X: (container width-image width) x50 %
Y: (container height-Image Height) x (-30%)
The obtained result applies the coordinate rule. If the difference value is negative and the percentage is positive, the calculation result is negative. If the difference value is negative and the percentage value is negative, the calculation result is a positive number. All in all, this is the operator-based algorithm. Bring the result of the operation into the coordinate rule to get the position of the image.

For example, the container is width: 600px; Height: 600px; the image is width: 200px; Height: 200px;
We can use the above style to obtain the image position:
X :( 600px-200px) * 50%
Y :( 600px-200px) * (-30%)
For example:

For your security, please only open the URL with reliable source

Cancel website opening

From: http://hi.baidu.com/wafu7969/blog/item/e8697dde5d063854ccbf1a96.html