Page 139 - CSS

<div class="icon icon3"></div>

CSS

.icon {
background: url(“icons-sprite.png”);
display: inline-block;
height: 20px;
width: 20px;
}
.icon1 {
background-position: 0px 0px;
}
.icon2 {
background-position: -20px 0px;
}
.icon3 {
background-position: -40px 0px;
}

By using setting the sprite's width and height and by using the background-position property in
CSS (with an x and y value) you can easily extract sprites from a sprite sheet using CSS.

Read CSS Image Sprites online: https://riptutorial.com/css/topic/3690/css-image-sprites

https://riptutorial.com/ 117