HTML + CSS serialization | 43 – CSS Sprite

html + css.jpeg

1. CSS Sprite

CSS Sprite is a CSS image synthesis technology that combines various small images into one image, and then uses CSS background positioning to display the corresponding image part.

Using CSS sprites can greatly reduce the number of HTTP requests on web pages, speed up response times, reduce back-end pressure, reduce the total size of images, and reduce the trouble of naming images. You only need to name one image. .

In actual development, the CSS sprite map is provided by the designer, and the location of the icon on the image is also provided.

CSS sprites are widely used. For example, the logo of a website is placed on a sprite:

image.png

Icons included in the sprite:

image.png

2. Use of CSS Sprite

The elements of the sprite map are implemented by displaying only a small part of the image. This is usually implemented using the background attribute. The following settings need to be made:

  • Set the width and height of the corresponding element
  • Set sprite as background image
  • Adjust the position of the background image to display

In actual development, the setter will tell us the location of each icon. If not, we can also query the location of the icon through this website. Select the icon to display the corresponding CSS code:

image.png

Create an HTML page with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    i.logo-icon {
      background-image: url(../images/topbar_sprite.png);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <i class="logo-icon"></i>
</body>
</html>

Then you need to check the specific location of the icon to be used, such as:

image.png

Modify the style to the following form:

i.logo-icon {
  background: url('../images/topbar_sprite.png') no-repeat 0 -19px;

  display: inline-block;
  width: 33px;
  height: 33px;
}

Open the HTML page in the browser, the effect is as follows:

image.png

Let’s add an icon again and get the icon’s position:

image.png

Then add to the CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    i.logo-icon {
      background: url('../images/topbar_sprite.png') no-repeat 0 -19px;

      display: inline-block;
      width: 33px;
      height: 33px;
    }

    div {
      width: 116px;
      height: 21px;
      background-color: #f00;
    }

    .title-icon {
      display: inline-block;
      background: url('../images/topbar_sprite.png') no-repeat -41px -25px;
width: 116px;
height: 21px;
    }
  </style>
</head>
<body>
  <i class="logo-icon"></i>

  <div><i class="title-icon"></i></div>
</body>
</html>

Open the page in the browser, the specific effect is as follows:

image.png

In the current CSS code, we are referencing the same image, so there is duplicate CSS code:

image.png

We can extract duplicate CSS code into a separate selector:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*Extract duplicate codes*/
    .topicon {
      display: inline-block;
      background-image: url('../images/topbar_sprite.png');
      background-repeat: no-repeat;
    }

    i.logo-icon {
      /* background: url('../images/topbar_sprite.png') no-repeat 0 -19px; */
      /* display: inline-block; */
      background-position: 0 -19px;
      width: 33px;
      height: 33px;
    }

    div {
      width: 116px;
      height: 21px;
      background-color: #f00;
    }

    .title-icon {
      /* display: inline-block; */
      /* background: url('../images/topbar_sprite.png') no-repeat -41px -25px; */
      background-position: -41px -25px;
width: 116px;
height: 21px;
    }
  </style>
</head>
<body>
  /*Use topic*/
  <i class="logo-icon topicon"></i>
  /*Use topic*/
  <div><i class="title-icon topicon"></i></div>
</body>
</html>

Refresh the browser, the effect is as follows:

image.png

2. Cursor display-cursor

cursor can set the style displayed when the mouse pointer is on an element. Common cursor values are:

  • auto: The browser determines the display style of the pointer based on the context, such as switching the pointer style based on text and non-text.
  • default: determined by the operating system, usually a small arrow
  • pointer: a small hand, this style will be the default when the mouse pointer moves to the link.
  • text: A vertical line. This style will be used by default when the mouse pointer moves over the text input box.
  • none: No pointer is displayed on the element

Create an HTML page and set the cursor. The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>I am div</div>
  <a href="">Bing it</a>
</body>
</html>

When the mouse is hovering over the div, it will also become a pointer state, and the HTML page will be opened in the browser. The effect is as follows:

image.png

You can see that the cursor of the div element has the same value as the cursor of the a element. When the mouse is hovering over the div element, it will turn into a small hand.

image.png