Home > Developer > Web Develop
It's normal to see a lot of icons in the page now, and to find that the icons used on the pages in the project are single individual files, and when you use them to hang directly onto the page, it's normal.
If the site is hanging on the internet, or the internet is too low, and a lot of use of the icon, because the number of concurrent connections between the browser and the server is limited, usually 4~8, then the icon display too slow or time-out will occur.
Of course, it would be nice to use a CDN or a domain-name distributed storage process for image files in the browser's concurrency, but not all of these conditions.
Generally will make the icon file as small as possible, however, 1 50k of files compared to 50 1k files downloaded up still has the advantage.
So, how do you want to display a single icon in a picture on the page, because there is no ability to slice the picture.
First, let's say that our icon images are commonly used in tree view:
To make a simple page, put two Div, you need to display the folder and file icon on these two div.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <style> </style> </Head> <Body> <Div></Div> <Div></Div> </Body></HTML>
The display method is simple, that is, the size of the element is set to the size of the icon, the picture as the background of the element, set the left and top of the picture so that the corresponding icon is revealed.
Defines a default style that specifies the size of the element, where the icon is 32*32, and the size of the element is set.
. tree-default{ width:32px; height:32px; }Define the display style of the folder icon, that is, the icon image as the background, adjust the left and top coordinate values according to the position of the icon.
. tree-folder{ Background:url ("Images/tree_icons_32px.png") -260px-4px no-repeat; }Defines the display style of the file icon and adjusts the location of the file icon.
. tree-file{ Background:url ("Images/tree_icons_32px.png") -100px-68px no-repeat; }Then set the element to style.
<class= "Tree-default tree-file"></div> <class= "Tree-default tree-folder"></Div >
After the completion of the effect:
Such processing is not without conditions, a single picture to be as compressed as possible, not all the icons are in a picture, you can put the commonly used in a picture, if too many can be divided into multiple pictures to place.
All code:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <style>. Tree-default{width:32px;Height:32px; }. Tree-file{background:URL ("images/tree_icons_32px.png") -100px-68px no-repeat; }. Tree-folder{background:URL ("images/tree_icons_32px.png") -260px-4px no-repeat; } </style> </Head> <Body> <Divclass= "Tree-default tree-file"></Div> <Divclass= "Tree-default tree-folder"></Div> </Body></HTML>
Multiple icons on a Web page in a single image, using CSS to display the icons
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
