Home > Web Front-end > HTML Tutorial > css sprite adjusts the size of small icons in large pictures_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 12:00:29
Original
1209 people have browsed it

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;}
Copy after login

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;}
Copy after login



OK, you’re done!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template