Use background in CSS-Beginner

This article is reproduced:Http://www.dwww.cn/news/2009-3/20093111943478871.shtml

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 the purpose,Is to reduce the number of HTTP requests, saving time and 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, so today we will talk about it systematically:

We know that when using images as the background,CSS should be written like this,Take the DIV container as an example. It can also be the background of body, TD, P, etc.

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

The attribute values of background are as follows:

# FffBackground color:(Color value, where the background image is not covered, or the background color when there is no background image)
ImageBackground image:(Here is the image address)
No-repeatRepeated or not:(When the image size is smaller than the container size, the image will be arranged repeatedly by default to fill up the container. No-repeat indicates no repetition. Only the positioning coordinates behind this time can be used .)
FixedWhether the background is scrolling with the container:(Two optional values: Scroll and fixed. The default value is scroll)
X YBackground Image Positioning:(Note that positioning is meaningful only when no-repeat is available. 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 coordinate axis origin is the container'sLeft Vertex.
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,The alignment rule is applied, 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 a few icons to illustrate the following situations:, The blue block indicates the image, and the dotted box indicates the container (DIV, TD, or body). Note that only the background image can be seen in the container. I use white to indicate the visible part, what's beyond the container range is invisible, I use Gray. 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: