如何在 css 和他的位置上处理 sprites 图像？答案

【问题标题】：How to work with sprites images in css and his position?如何在 css 和他的位置上处理 sprites 图像？
【发布时间】：2020-02-12 17:58:27
【问题描述】：

在我作为前端开发人员的职业生涯中，出于教育目的，我正在尝试克隆 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 等。

问题是我不知道我是否很好地定位了精灵，以便它向我显示我想要的图标。这是应该出现的图标的图像：

但是，这就是我得到的：

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

【问题讨论】：

标签： html css sass sprite

【解决方案1】：

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

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

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

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>

【讨论】：

这里是您的回答 codepen.io/gc-nomade/pen/KKpdRjx 的实时代码笔，我正要回答有关调整元素大小的相同问题。我会做一个sn-p，请随意再次编辑您的答案。
非常感谢。但是，为什么我需要放置 display:inline？因为 a 元素？
如果你把它作为inline 并且它没有内容，它将是 0x0px 元素，你将无法看到它的背景。您需要将其设为inline-block，以便它可以显示内部没有内容的元素的背景。