Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve background positioning in css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to achieve background positioning in css.

1. Word representation, which indicates the corresponding alignment between the picture and the background area of the box.

Horizontal optional words: left, center, right

Optional words in vertical direction: top, center, bottom

2. Pixel representation, the pixel value distinguishes between positive and negative, and a positive number indicates that the picture moves to the right and down for the origin of the box.

The first attribute value: the number of pixels, indicating the distance at which the upper-left corner of the background image is shifted horizontally against the upper-left vertex within the border.

The second attribute value: the pixel is several, which indicates the distance of the vertical displacement of the upper-left vertex of the background image against the upper-left vertex within the border.

Note: a negative number indicates that the picture moves left and upward for the origin of the box.

You can use negative attribute values to make part of a large background image displayed in a small box. Use fireworks software to measure the size and read the data. Can be used for genie diagrams.

Step 1: in the design drawing, use the slicing tool to make a slice of the size of the area you want to display, so that the upper-left vertex of the slice is located in the background you want to load.

The second step: read the slice data of the attribute bar, where the width and height are the width and height of the box to be loaded, and the values of x and y represent the absolute value of the moving distance, and directly assign the value plus a minus sign to the background positioning attribute.

3. Percentage representation, the value represented by 100%.

Horizontal, which is equivalent to the width of the background area within the border of the box minus the width of the picture.

The vertical direction is equivalent to the height of the background area within the border of the box minus the height of the image.

At this point, I believe you have a deeper understanding of "how to achieve background positioning in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.