CSS Sprites and Opacity

Sprites

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.

 

Ex.

     <!DOCTYPE html>

     <html lang="en">

     <head>

     <meta charset="UTF-8">

     <title>Example of CSS Sprite</title>

     <style type="text/css">

          .sprite {

               background: url("/examples/images/Sprite.png") no-repeat;

         }

          .ie {

               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 */

          }

     </style>

     </head>

     <body>

                    <span class="sprite ie"></span>

      </body>

      </html>

 

Opacity:

The opacity CSS property specifies the transparency of an element.

Ex.

    <style type="text/css">

            p {

                        opacity: 0.7;

                        padding: 10px;

                        background:blue;

            }

     </style>

Output:

Background color depends on opacity and chage it as per given value.

Powered  by Codersarts