Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to make sprite with css". In daily operation, I believe many people have doubts about how to make sprite with css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to make sprite with css". Next, please follow the editor to study!

This question is actually a point of front-end performance optimization. The English word for Sprite is CSS Sprites. Its purpose is to merge a number of smaller pictures into a large picture, the background of the large picture is transparent, when used, through the picture as a background picture, through different background-position positioning to show that part of the picture.

Benefits

Reduce server pressure.

Reduce network requests and render pages faster.

Shortcoming

It is difficult to maintain later, so adding a picture needs to be remade.

Application trouble, each picture needs to calculate the position, by adjusting the position to display the picture, the error requirements are very strict.

The use of pictures is limited. It can only be used on the background picture background-image, but not on the background image.

Tags to use.

Make a sprite map

Just upload the picture you want, and you can generate the sprite image on the right. Download the picture, and you can reference it. You can directly copy the css code of the coordinates to reference the picture. Here is a complete example:

Css Sprite demonstration

Export default {

Name: "cssSprites"

Components: {}

Data () {

Return {

MoodList: ['bg-mood_afraid',' bg-mood_angry', 'bg-mood_calm',' bg-mood_expect', 'bg-mood_happy',' bg-mood_miss','bg-mood_nervous', 'bg-mood_sad',' bg-mood_surprised']

}

}

Methods: {

}

Computed: {}

Created: function () {}

}

.cssSprites {

Li {

Display: inline-block

}

. bg-mood_afraid {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-10px-10px

}

. bg-mood_angry {

Width: 176px

Height: 176px

Background: url ('.. / assets/img/css_sprites.png')-206px-10px

}

. bg-mood_calm {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-10px-206px

}

. bg-mood_expect {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-206px-206px

}

. bg-mood_happy {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-402px-10px

}

. bg-mood_miss {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-402px-206px

}

. bg-mood_nervous {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-10px-402px

}

. bg-mood_sad {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-206px-402px

}

. bg-mood_surprised {

Width: 176px; height: 176px

Background: url ('.. / assets/img/css_sprites.png')-402px-402px

}

}

You can see that the whole reference to a background picture, reducing the network request, but to a certain extent increased the client memory consumption, through the background-position to set the location of the picture, to achieve the purpose of displaying part of the background image.

The use scene of Sprite

It is mainly used on the icon of the website, and many websites have many small icons. If these small icons request the network separately, it must consume a lot of playing network resources (each request will have a time to connect and disconnect), but for larger pictures, it is not recommended to use sprite images, because the pictures are too large, the amount of data obtained by one request is large, and it will take a long time to get this big picture. Reduces the overall experience of the web page.

At this point, the study on "how to make a sprite map with css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.