Home > Developer > Web Develop
I've only heard of the sprite, and then came here to do the first job involved in him. Because afraid will not use, they originally cut, that tune of trouble Ah, calculate that background-position difficult ah. The reason is that their sprite is cut together, there is no gap, so you can only use a scrap tag to put a special icon. Now found Sprite is still very useful, put all the pictures to be used together, and then according to the positioning to recall the pictures to use is very convenient.
I wrote a little Demo:http://codepen.io/tianzi77/pen/xggmbo.
Refer to the site at the bottom of the mouse to put up when there is a toggle effect.
The code is also simple:
<! DOCTYPE html><html><head><meta charset="Utf-8"><meta http-equiv="x-ua-compatible" content="Ie=edge,chrome=1" ><title>Examples</title><meta name="description" content= ""><meta name="keywords" content= ""><link href="" rel="stylesheet"><style type="Text/css"> span{ width: + px; Height: + px; Display: block; background: url (https://static.yijiedai.com/Images/Common/footer2.png) no-repeat 0 0; } span: Hover{ background: url (https://static.yijiedai.com/Images/Common/footer2.png) no-repeat C5>0 -px; cursor: pointer; }</style></head><body> <span></span></body></html>CSS Sprite diagram is important to locate: Left top problem.
The alignment of the icons in this order is key.
Practical tips:
Don't wait until you finish slicing to start the sprite.
If you write CSS while transduction, and then when you finish the whole site and then splice the pictures into a sprite, you have to rewrite your CSS completely, and you have to spend a lot of time stitching up a lot of pictures with PS-it's a very tangled thing. But if Bencetu is integrated, it will be easier.
Put the picture in the opposite place where it's going to be displayed.
This little trick seems rather difficult to understand. I didn't understand this until I created a larger sprite. For example, if we want a picture to appear on the left side of an element: put that picture on the right side of the sprite picture (the sprite image that starts this article). In this case, when you move the background image through the CSS position, it is almost impossible to have other small pictures accidentally appear near it. One of the problems that you often encounter when using a sprite is that the picture appears where it should not appear.
Avoid using bottom or right when locating
When using CSS sprites, use only background-position:bottom-300px or background-position:right-200px; This is possible at the beginning, but the problem is that when you extend the relevant sprite picture on the width or height, the original position may be wrong, because the picture is no longer at the bottom or right of the sprite image. Use the exact location to avoid this problem.
Give each picture enough space
As you can see in the example image at the top of this article, those small images are reserved for enough space. Why not put them in a piece to make the sprite picture smaller? Because the elements that use these images often have a lot of content and may require extended spacing, so that other images do not appear unexpectedly.
Don't worry about the pixel size of the sprite picture
If your site is well-designed, you'll have a whole bunch of pictures to integrate into the sprite, so you'll need a very large sprite to properly place the images. That's pretty good. The white space in the sprite does not take up too much file size. The sprite image used on a shopping website abroad is 1,000pxx2,000 px, but the size of the picture is only 16.7kb!
A small case list of CSS sprite charts
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
