Analysis of CSS Sprite to intercept small images from large images-CSS Tutorial-php.cn

This article mainly introduces relevant information about the complete tutorial of using CSS Sprite to intercept small images from large images. Friends who need it can refer to it

I believe that many children who like to study web interfaces have encountered a wonderful thing. Phenomenon: Many picture materials on the web page are combined into one picture.

When Xiaocai imitated the website at first, I often encountered this phenomenon. I didn’t know what technology was available at that time. I couldn’t use the entire picture material. I could only use PS to cut the picture into individual pieces. Use again. . .

In fact, this is a very simple technology. It is because it is too difficult to imagine that we have never been able to find the key to the problem.

To implement CSS cutout, you only need to use one attribute: background-position.

According to the literal understanding, this attribute is background positioning. First look at the material picture of the Google website, as follows:

If Xiaocai now wants to make a 1 button , using the material picture above, picture A is displayed in the normal state, and picture B is displayed after the mouse is moved up to achieve such a dynamic effect.

Buttons are used to implement functions. Generally, a hyperlink is used to respond to a click event. However, the background image cannot be added directly to the hyperlink, otherwise it is not called a style. La, because when the text length of the hyperlink changes, the style also changes.

The common approach for people on earth is to put a hyperlink in p. The hyperlink is responsible for implementing the function, and p is responsible for loading the background image. The html structure is as follows:

<p class="btn">
    <a href="<a href="http://www.jb51.net">+1</a">http://www.jb51.net">+1</a</a>>
</p>

Copy after login

With the html skeleton, the next step is to write the css style.

If we don’t consider anything, just set the entire picture as the background, the style is as follows:

.btn{    background:url(bg.png);}

Copy after login

The effect is as shown:

# #p is a block-level element, which occupies one line by default. Don’t worry about this for now, but seeing that the background image is repeated, this is obviously not what we want. Add the background-repeat:no-repeat; attribute and improve the style as follows:

.btn{    background:url(bg.png);    background-repeat:no-repeat;}

Copy after login

This way I won’t repeat myself.

p can be understood as a rectangular box, its upper left corner is the vertex, and the vertex of the background image is also the upper left corner. When p loads the background image, the two vertices will overlap, and the coordinates of the vertex are (0,0 ). If you don’t understand, look at the picture, it’s very simple. . .

The small picture of 1 is mixed in the big picture. If you want to extract it, you need to use the background-position attribute. This attribute is equivalent to moving the vertices of p without moving the big picture. Move, move to the vertex position of the target small picture, as shown below:

In this way, what is displayed in p is the small picture, but what is displayed is not only Small picture, but the shaded part in the picture, what should I do? Set the width and height of p and make it the same as the width and height of the small picture! !

Let’s take a look at the background-position attribute. It has two parameters, namely the pixels moved in the horizontal direction and the pixels moved in the vertical direction, both expressed as negative numbers. If the big picture doesn't move, p can only move to the right or downward. Just remember that pixels moving in these two directions are represented by negative numbers!

Therefore, just find the horizontal moving pixels and vertical moving pixels of the small picture relative to the upper left corner vertex of the large picture. Xiaocai doesn't need any professional tools. It's very convenient to take screenshots. Start cutting from the upper left corner of the big picture and stop at the top of the small picture. Once you see the pixels, it's almost the same. Then you can debug and debug it, and it's basically done.

In this example, the displacement of small picture A is: -25px -374px, and the size of small picture A is: 24px 16px. Therefore, the css style is as follows:

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
}

Copy after login

The effect is as follows:

This way the small picture is cut out! Keep it simple! !

Let me explain the problem first. There is a 1 on the picture, and I wrote a 1 on the hyperlink. This is because many times the text content is not written on the picture. That way the flexibility is too poor, and the text is Text, in order to give you a complete demonstration, Xiaocai wrote another 1, and we will deal with it next!

First center 1. Centering is divided into horizontal centering and vertical centering. Horizontally centered hyperlinks need to set text-align:center; on p. This attribute is for child nodes; vertical centering p For the hyperlink in, you only need to set the line-height attribute of the a tag to be the same as the height of p. The style is as follows:

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
    text-align:center;
}
.btn a{
    line-height:16px;
}

Copy after login

The effect is as follows:

Next, there is still a problem. We can find that only when the mouse moves over the 1 text, Only when the mouse becomes a hand can it respond to events.

This is obviously not what we want. When the mouse moves into the picture, to be precise, when the mouse moves into p, it can change into a hand shape and respond to events.

This is also simple, just add the display:block; attribute to the a tag (hyperlink).

另外这个下划线比较碍眼，用text-decoration:none;属性去掉，很常见，就不多说了。

样式如下：

.btn{
   background:url(bg.png);
   background-repeat:no-repeat;
   background-position:-25px -374px;
   height:16px;
   width:24px;
   text-align:center;
}
.btn a{
   line-height:16px;
   display:block;
   text-decoration:none;
}

Copy after login

接下来就剩最后一件事了，那就是鼠标移入的时候切换背景。

本例是p里边套a标签，鼠标移入换背景，当然是指鼠标移入p，而且换背景也是换p的背景，可不是a标签的哦！！

因此要在p标签上调用hover，p的样式是btn，因此写成.btn:hover{}。

换背景还需要找到背景图片，这又需要抠小图了，也就是抠上边指出的B图。

刚刚显示的是A小图，B小图和A小图在同一水平线上，因此竖直方向的移动像素是相同的，水平方向差不就是A小图的水平像素加上A小图的宽度。

经过测试，B小图的位移是：-50px -374px，尺寸大小就不用关心了，肯定和A小图一样，不一样就没法做了。

把B小图的定位background-position:-50px -374px;放在.btn:hover{}里即可。

样式如下：

.btn{
   background:url(bg.png);
   background-repeat:no-repeat;
   background-position:-25px -374px;
   height:16px;
   width:24px;
   text-align:center;
}
.btn a{
   line-height:16px;
   display:block;
   text-decoration:none;
}
.btn:hover{
   background-position:-50px -374px;
}

Copy after login

最终效果-鼠标移入之前：