When we study the styles of other websites, we often find a situation where the same image is used in many background attributes to satisfy the use of various parts of the web page. If you open this kind of picture and take a look, you will find that this picture contains many small pictures, such as:
Another example:
These small pictures are the parts after the whole picture is divided. Each part is placed on one picture instead of being stored as separate pictures. We all know that the purpose is to reduce the number of http requests and save time and bandwidth .
So how to realize that only part of a picture is displayed in different places? This uses the positioning problem of the background picture we are going to talk about today. I believe many people have been depressed about this problem, and friends often ask me, so today I will explain it systematically:
We know that when using an image as a background, the css should be written like this . Take the div container as an example, it can also be body, The background of td, p, etc. is the same.
Code: div{ background: #FFF url(image) no-repeat fixed xy;} |
The background attribute values here are:
#FFF background color: (color value, the place where the background image is not covered, or when there is no background image background color)
image background picture: (Here is the address of the picture)
Whether no-repeat is repeated: (When the picture is smaller than the size of the container, the picture will be arranged repeatedly to fill the container by default. No-repeat means no repetition. Only at this time will the subsequent positioning coordinates be useful.)
Whether the fixed background scrolls with the container: (There are two optional values, scroll scrolls, fixed does not scroll, the default is scroll)
Positioning of xy background image: (Note that positioning is meaningful only under no-repeat. This is the focus of today)
We need to clarify a few points in background image positioning:
1. The first one of the two values is horizontal positioning , we call it x-axis positioning. The latter value is the longitudinal positioning, which we call the y-axis positioning. If there is only one value, the default is the x-axis direction. At this time, the y-axis direction defaults to aligning up and down, which is center.
2. The origin of the coordinate axis is the left vertex of the corresponding container.
3. The y-axis arrow of this coordinate points downward, that is, the xy values in the lower right corner (inside the container) are all positive.
4. The xy values respectively represent 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 xy can be expressed as percentage or px.
6. xy can also be expressed by the five alignment methods of "left, right, top, bottom, center", but note: when expressed by "left, right, top, bottom, center", the alignment rules are applied , rather than coordinate rules . When x is left, it means the left side of the picture is aligned with the left side of the container. When it is right, it means the right side of the picture is aligned with the right side of the container. When y is top, it means the top of the picture is aligned with the top of the container. When it is bottom, it means the top of the picture is aligned. The bottom is aligned with the bottom of the container. When xy is equal to center, it means centered alignment.
7. When xy is expressed as a percentage or px, its value can be a negative number. We can easily understand the meaning of negative numbers by applying the coordinate rules. When x is a negative number, it means that the left vertex of the picture is to the left of the left vertex of the container. When y is a negative number, it means that the left vertex of the picture is above the left fixed point of the container. That is, to the left and up beyond the scope of the container.
Below I use a few illustrations to illustrate several situations . The blue block represents the picture, and the dotted box represents the container (it can be div, td, or directly body). Note that we can only see the background image within the container. I use white Indicates the visible part, and what is beyond the scope of the container is invisible. I use gray to indicate it. The coordinates of the left fixed point of the container are (0, 0).
The first one, the background image is aligned with the top left of the content, 0px 0px can also be written as left top
In the second picture, the background image is in the middle of the container, and the fixed point coordinates are positive values.
In the third picture, the background image is on the upper left side of the container, and the fixed point coordinates are negative
---------------------------------- ----------------------------------------
At this point we may understand how to use the positioning value in the background to accurately position a background image. Let's go back and take a look at the two images introduced at the beginning. We can use: background positioning and only visible within the container. Properties to call a certain part of the entire picture at will.
But for the convenience of calling, we need to pay attention to some rules when arranging these small pictures. For example: the distance between small pictures is usually the size of the container in which the small pictures are called, or the distance is larger, so as to avoid being displayed in the container. Show us pictures we don't want to show!
In addition, if the positioning uses percentages, the algorithm is rather special. Let me give you an example:
Code: background:#FFF url(image) no-repeat fixed 50% -30%; |
At this time, where should the image be in the container? The algorithm formula is as follows:
the coordinate position of the left vertex of the image from the left vertex of the container for
x: (width of container - width of image) x50%
y: (height of container - height of image) x (-30%)
The obtained result applies the coordinate rule. If the difference is negative and the percentage is positive, the result of the operation is negative. If the difference is negative and the percentage is negative, the result is positive. All in all, the operation here conforms to the algorithm. By bringing the result of the operation into the coordinate rule, you can get the position of the picture.
For example: the container is width: 600px; height: 600px; and the picture is width: 200px; height: 200px;
Using the above style, we can get the image position as:
x: (600px-200px)*50%
y: (600px-200px)*(-30%)
As shown below:
