1. Keyword, for example: Background-position: Top right;
Advantages: intuitive, high availability, consistent performance in various browsers.
Disadvantage: The interval size is missing. three vertical (top, center, bottom) and three horizontal (left, center, right) can only combine up to 9 positions for you. there are no other mixed combinations. and it is difficult to use arithmetic for control like the other two numerical locating methods.
2. pixels, for example, background-position: 0px 0px;
Advantage: The concept is easy to understand. As long as you know how to measure the distance between the upper left corner of the container and the upper left corner of the image, you can accurately predict the position of the image. pixels can also be precisely controlled by mathematics.
Disadvantage: you must know the exact value.
Principle. It is actually the coordinate relationship between the upper left corner of the image and the upper left corner of the container.
3. Percentage, for example, background-position: 80% 50%;
Advantage: You can use mathematics to control positioning, and it is more flexible than pixel positioning.
Disadvantage: unable to deal with complicated percentage positioning in IE.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Percentage positioning of background-image </title>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style>
Body {
Font-family: Arial, Helvetica, sans-serif
}
. Box1,. box2,. box3,. box4 {
Float: left;
Margin-Right: 1em;
Width: 100px;
Height: 100px;
Position: relative;
Background: # f3f2e2 URL (http://files.jb51.net/demoimg/200912/1234.png) No-Repeat;
Font-size: 9px;
Text-align: center;
}
. Box1 {
Background-position: 0% 0%;
}
. Box2 {
Background-position: 35% 0%;
}
. Box3 {
Background-position: 66.6666666666666% 0%
}
. Box4 {
Background: # f3f2e2 URL (http://files.jb51.net/demoimg/200912/1234.png) 100% 0% no-Repeat;
}
. Wrap {
Clear: both;
Overflow: hidden;
}
P {
Clear: both;
Overflow: hidden;
}
</Style>
</Head>
<Body>
<Div class = "Wrap">
<Div class = "box1" style = "background-position: 0% 0%">
Background-position:
0% 0% </div>
<Div class = "box2" style = "background-position: 0% 33.33333%">
Background-position:
0% 33.33333% </div>
<Div class = "box3" style = "background-position: 0% 66.66666%">
Background-position:
0% 66.66666% </div>
<Div class = "box4" style = "background-position: 0% 100%">
Background-position:
0% 100% </div>
<P> divs set at 100px x 100px with their <code> background-image </code> set as the sprite graphic
</P>
</Div>
<P> the original sprite graphic.
</P>
</Body>
</Html>
</Head>
<Body>
</Body>
</Html>
Tip: you can modify someCodeRun again
Principle. Unlike pixel positioning, the percentage position indicates the corresponding position inside the container and image as the display position.
Why do I need to put multiple icons in an image file when creating a webpage?
Users who often search for resources on the Internet may find that many websites prefer to put small icons in an image file. then the access icon is located through the background-position in CSS. This is especially true for websites with large traffic volumes. why? Isn't separate management more flexible?
Everyone has its advantages in doing so, but this also has shortcomings.
Advantages:
1. 1 + 1 <2
Put the icons together to make the total size of the icons slightly smaller. This is not the most important thing, but I can tell you a lot.ProgramMembers are perfectionists.
2. greatly reduce the number of connections
A friend who has used opera may be very impressed with the progress bar that shows the image download. It will show "downloaded images/total number of images ". each Independent resource on the Web server needs to be connected and obtained. therefore, we try to put many icons on one image and connect them all at once. this may be the main purpose of a multi-goal diagram.
3. Ask the browser to pre-download the icon
In order to display the page as soon as possible, the browser only downloads the images used when the page is opened to the local device, and some may be used, however, images that are not immediately used need to be downloaded during the application. the most typical example may be the tab icon of the navigation menu. If the tab icon in the normal state is placed independently when you move the cursor over the tab icon, icon to start downloading. This will bring bad visual effects to users. in this case, it is necessary to merge multiple icons.
Disadvantages:
1. Difficult to manage and locate Images
If you want to change an icon, You need to edit the entire large image. if you want to change the size of an icon, you may need to recalculate its location, or even add another icon at another location.
2. 2> 1
The merged images of the two icons must be larger than the exclusive images of one of the two icons. That is to say, it takes longer to download the image than to use a single icon. generally, images displayed in the browser are displayed after they are downloaded or when they are downloaded. If the size of images composed of your icons is large, they cannot be displayed to users one by one, this will lead to poor user experience.
Application:
1. arrange icons as regular as possible
Regularly discharged icons are easy to locate and maintain. Standard sizes such as 16, 32, 48, and 96 can be used here.
2. Place icons with the same background color
If the background color is different, it is best to divide it into two or more images, especially those with similar background colors, which are easy to confuse.
3. Place icons for the same column together
In this way, you can write less CSS code. Set a background and set the background-position for each item.
4. Do not bind a large image to one piece.
Most users do not patiently wait for the page, so the file is downloaded and then read, "impatient" will drive them to close.
Expansion:
Everything is connected, and software and Internet technologies are the same. if the image is used as a network resource and needs to be connected to each image. JS files and. the same applies to CSS files. we should bind the resources that may be put together. in this way, you can save some resources and satisfy your pursuit of perfection.
However, do not overdo it. not all items can be bound together. No one will wrap laundry detergent and cookies together. it is okay to put relevant or especially fragmented data together. I believe that you will surely have your own classification method.
Detailed source reference: http://www.jb51.net/css/23214.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
