What are css sprites? Summary of css sprite skills

Css Sprite must be mastered as a front-end staff, but this is difficult for students who are just learning. I will share this content specifically. There is no network image address here. If the content is displayed If it is not comprehensive, you can check it out in my personal blog

CSS Sprites are called css sprites by many people in China. They are a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. . For the current popular network speed, the loading time required for a single image not exceeding 200KB is basically the same, so there is no need to worry about this issue. The key to acceleration is not to reduce weight, but to reduce the number of units. Traditional cutting of pictures pays attention to precision. The smaller the picture size, the better, and the smaller the weight, the better. In fact, the size does not matter, computers are all calculated in bytes. Every time the client displays an image, it sends a request to the server. Therefore, the more images there are, the more requests there are, and the greater the possibility of delays.

CSS Sprites actually integrates some background images in the web page into an image file, and then uses the combination of CSS "background-image", "background-repeat" and "background-position" for background positioning , background-position can use numbers to accurately locate the position of the background image.

Below I will explain its usage techniques in detail, so that you will have a clear and new understanding of children's shoes that you don't understand now. Although there are such tools currently, you still need to understand its principles and techniques first. If you do it sexually, you can quickly complete the positioning. I will share a case below.

First of all, let me explain to you that since the backgrounds that need to be positioned are all merged into one picture, they are all one size fits all. Either the X-axis coordinates are consistent or the Y-axis coordinates are consistent. That’s me. There are 2 types described below.

1. Horizontal positioning coordinates

Horizontal positioning coordinates mean that the Y-axis coordinate is fixed. Its characteristic is that the height of each icon is consistent, and the background is changed by changing the position of the x-coordinate. Just measure the width of each icon to know the x-axis coordinate. If you still don’t know this rule, I will explain it to you below. Let’s take two cases I did as examples.

So let’s explain how to position in detail. Here is to change the X coordinate to position.

Since the heights are the same, the coordinates on the Y-axis are all 0 or top

I use a span as the background for each icon here. Let’s analyze the code in detail:

<div class="join c">
            <strong>Join us on:</strong>
            <ul class="c">
                <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
                <li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
                <li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
                <li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span  class="sharelogo flickrLogo"></span></a></li>
                <li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
                <li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
            </ul>
        </div>

The following is the Css code:

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
 
.facebookLogo{background-position:0 0;width:20px;}
 
.pinterestLogo{background-position:-20px 0;width:42px;}
 
.twitterLogo{background-position:-62px 0;width:30px;}/**/
 
.flickrLogo{background-position:-92px 0;width:130px;}
 
.youtubeLogo{background-position:-222px 0;width:98px}
 
.blogLogo{background-position:-320px 0;width:84px;}
 
.sl{float:left;padding-right:10px;}

Their background images all share this background: background-image:url(../images/shareIcon.jpg);

The background of each element is not allowed to be repeated: that is: background-repeat:no-repeat;

After reading this, you have discovered a rule, that is, the coordinates of each element are equal to the coordinates of the previous element plus the width. . That is, the horizontal coordinate value formula of the element is equal to. The coordinate value of the adjacent element plus the width.

The value of pinterestLogo is equal to the coordinate value of facebookLogo 20px + the width of facebookLogo 20px; Isn’t it very simple, as long as you know the width of the element, because the horizontal coordinates must be given a fixed width, so this Measuring width in one step is not a waste of time. I hope to take a closer look at the pattern of coordinate values ​​in the source code.

No matter when positioning the coordinates horizontally or vertically, their starting positions are background-position: 0 0; while the height is fixed during horizontal positioning, so you only need to change the X coordinate each time The value is realized.

For example, Facebook's logo is the icon at the starting position, so its coordinate value is 0,0, which realizes its positioning.

Then the pinterest logo is the one below it, which is calculated from the negative value of the width of facebook. Since the width of Facebook is 21px; so the coordinates of pinterest's logo are background-position:-20px 0; and so on

twitterLogo is the one below pinterstLogo, then use the coordinate value of pinterstLogo plus pinterstlogo## The width of

# will get the coordinate position of twitterLogo. That is -(20px+42px)=-62px; that is, the coordinate value of twitterLogo is.twitterLogo{background-position:-62px 0;width:30px;}

After reading this, you have discovered a pattern, that is, every The coordinates of an adjacent element are equal to the coordinate value of the preceding element plus the width of the preceding element. That is, the horizontal coordinate value of the element is equal to. The coordinate value of the adjacent element plus its width. Okay, let’s talk about the second option.

2. Vertical positioning coordinates

The vertical positioning coordinates mean that the X-axis coordinates are fixed, and the Y-axis coordinates are changed to change the background. Their widths are fixed, so their X-axis coordinates It's always the same, 0 or left. Let me share a case below

Css code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}
.p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/
</style>
</head>
                                                                                           
<body>
<ul>                                                                                           
<li class="f"></li>
<li class="p"></li>
<li class="fr"></li>
<li class="h"></li>
<li class="t"></li>
</ul>
</body>
</html>

3. When the width and height are equal, that is the best. Do the multiplication directly. I believe your math ability is better than the others. I am in the third grade of elementary school. Ok, let me share it.

1. When the width and height want to be equal, the X-axis coordinates are equal. This situation usually occurs under a group of buttons, and the background changes when the mouse slides over and clicks. I have also summarized this situation. There is a formula:

X-axis coordinate =-n (starting position + width).

where n value starts from 0. That is, the coordinates of all starting positions are 0, starting from 0. The following is analogous.

For example, the element you want to locate now is the third one. Assume that the width of our icon here is 30px. Then its X-axis coordinate is equal to . x=-3*(0+30px);

Y-axis coordinate=-n (starting position + height)

For example, the icon you want to locate now is the 6th position, Assume that the height here is also 32px; then its Y-axis coordinate is

Y=-6 (0+32px) =-192px. Haha, of course there are many tools, the tool called gaga is very good , but I have never used it. I have always used my own set. I find it very convenient in practice, so I would like to share it.

The above is the detailed content of What are css sprites? Summary of css sprite skills. For more information, please follow other related articles on the PHP Chinese website!