CSS Sprites and Opacity
CSS sprites technique is a way to reduce the number of HTTP requests made for image resources.
Let we suppose HTML page contains many of images like an icon, and other small images than it is very difficult to send an HTTP request for every image so use the sprites which load it with minimum time and increase page efficiency.
<title>Example of CSS Sprite</title>
background: url("/examples/images/Sprite.png") no-repeat;
width: 50px; /* Icon width */
height: 50px; /* Icon height */
display: inline-block; /* Display icon as inline block */
background-position: 0 -200px; /* Icon background position in sprite */
<span class="sprite ie"></span>
The opacity CSS property specifies the transparency of an element.
Background color depends on opacity and chage it as per given value.