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

This article mainly shows you "how to use the background-position attribute in the background image positioning", the content is simple and clear, hoping to help you solve your doubts, the following let the editor lead you to study and learn "how to use the background-position attribute in the background map positioning" this article.

Recently, I need a lot of bits and pieces of pictures that use a lot of tabs and buttons in the project, and I haven't had the opportunity to use the "wizard technology" in Css. Here I write my understanding of background-position as a document for more people to use and learn.

A combination of all existing button pictures

Step one: we are going to show

This button, then we need to define a div (later we call Windows) tag, width and height just enough to fit this button.

Step 2: this is the point I am talking about today. Many people say that background-position is the background picture of the operation, but I say that the window of the operation, through which we can see only part of the background picture.

The understanding of horizontal and vertical coordinates is that as long as the window moves in the area of the picture, we all say it is negative (negative coordinates).

Display

This picture button, we do not need to specify coordinates, the default is him. Of course, you can also # div5 {background-position: 0px 0px;}

To display this picture button, you must set the coordinates of background-position, # div6 {background-position:-42px 0px;}

Display this picture button, # div8 {background-position:-42px-41px;}

The rest, and so on.

The above is all the content of the article "how to use the background-position attribute in the background image positioning". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.