CSS Sprites (CSS puzzle compositing) use

What is CSS Sprites

ICON on the page, column background, picture button merge a background map with the rules

Using background-position to realize the positioning of background image

Common CSS Sprites tools

1. CSS Satyr

You can drag arrange/auto generate CSS Big picture

. pic {Background-image:url ("CSS satyr.png"); display:block;}. pic_5 {background-position: -140px-0px; width:16px; height:16px;}. pic_1 {background-position: -0px-0px; width:16px; height:16px;}. pic_2 {background-position: -35px-0px; width:16px; height:16px;}. pic_3 {background-position: -70px-0px; width:16px; height:16px;}. pic_4 {background-position: -105px-0px; width:16px; height:16px; }

2. CSS Image Flattening Generator

Online compositing tools

CSS Sprites (CSS puzzle compositing) use