css sprite adjusts the size of small icons in large pictures_html/css_WEB-ITnose

Let’s talk about the solution directly:

Assume that the size of a combined large picture is: 900 x 1000 px (as shown above)

Now I want to take the hippopotamus icon in the upper left corner of the picture and reduce the size of the icon.

Normally take the image:

.sprite {	background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px;	width: 190px;height: 154px;}

Now take half the normal icon size:

<pre name="code" class="html">.sprite {	background: url('all.png') no-repeat -10px -40px;width: 95px;height: 74px;background-size:450px 500px;}

OK, you’re done!