如何使用 css 和他的位置中的精灵图像？

Question

在我作为前端开发人员的职业生涯中，出于教育目的，我正在尝试克隆 Google 前端。在这种情况下，我正在使用 Google 自己的精灵。在这里我放了一张我正在使用的精灵的图像。

这是我目前携带的HTML。如您所见，我仍在创建页眉。

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Google. Búsqueda avanzada · Programas de publicidadTodo acerca de GoogleGoogle.com in English. © 2020 - Privacidad - Condiciones." />
    <meta name="author" content="Diesan Romero" />

    <link rel="stylesheet" href="./assets/css/main.css" />
    <title>Google</title>

</head>
<body>
    <header>
        <nav>
            <ul class="nav-right__section">
                <li>
                    <a href="#">Gmail</a>
                </li>
                <li>
                    <a href="#">Imágenes</a>
                </li>
                <li>
                    <a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
                </li>
                <li>
                    <a href="#">Iniciar Sesión</a>
                </li>
            </ul>
        </nav>
    </header>
</body>
</html>

另一方面，这是我目前拥有的 sass 文件：

header {
    width: 100%;
    height: 60px;

    nav {
        display: flex;
        justify-content: flex-end;

        .nav-right__section {
            width: 250px;
            height: auto;
            display: flex;
            list-style: none;
            justify-content: center;
            align-items: center;

            a {
                margin-right: 10px;
                color: $black-color;
            }
            a.menu-icon {
                background-image: url('../images/sprite.png');
                background-size: 528px 68px;
                background-position: -132px -38px;
                color: #000;
                opacity: .55;
            }

        }
    }
}

我之所以使用sass是因为我会定期将项目提升到另一个层次，也许我会把它传递给React等

问题是我不知道我是否正确定位了 sprite，以便它显示我想要的图标。这是应该出现的图标图像：

然而，这就是我得到的：

是的，我知道，很伤心有人可以帮我吗？

Answer 1

我想你只需要将元素设置为 display:inline 块并给它一个大小

据我所见，我认为该元素现在是 0x0 像素。

尝试将此添加到 a.menu-icon class

height: 29px;
width: 28px;
display: inline-block;

/* compiled style */

header {
  width: 100%;
  height: 60px;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

header nav .nav-right__section {
  width: 250px;
  height: auto;
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}

header nav .nav-right__section a {
  margin-right: 10px;
  color: #222;
}

header nav .nav-right__section a.menu-icon {
  background-image: url("https://i.stack.imgur.com/YTlAV.png");
  background-size: 528px 68px;
  background-position: -132px -38px;
  color: #000;
  opacity: 0.55;
  display: inline-block;
  width: 30px;
  height: 30px;
}

<header>
  <nav>
    <ul class="nav-right__section">
      <li>
        <a href="#">Gmail</a>
      </li>
      <li>
        <a href="#">Imágenes</a>
      </li>
      <li>
        <a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
      </li>
      <li>
        <a href="#">Iniciar Sesión</a>
      </li>
    </ul>
  </nav>

如何使用 css 和他的位置中的精灵图像？

How to work with sprites images in css and his position?

html

css

sass

sprite