Как работать со спрайтами изображения в css и его позиции? - PullRequest
Новая
       17

Как работать со спрайтами изображения в css и его позиции?

0 голосов
/ 12 февраля 2020

Я пытаюсь клонировать фронт Google для образовательных целей в своей карьере в качестве разработчика фронт-энда. В этом случае я работаю с собственным спрайтом Google. Здесь я поместил изображение спрайта, с которым я работаю.

enter image description here

Это 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, et c.

Проблема в том, что я не знаю, правильно ли я позиционирую спрайт, что он показывает мне значок, который я хочу. Вот изображение иконки, которая должна выйти:

enter image description here

Однако вот что я получаю:

enter image description here

Да, я знаю, очень грустно ? Может кто-нибудь помочь мне?

1 Ответ

2 голосов
/ 12 февраля 2020

Я думаю, вам просто нужно установить элемент как display: inline-block и дать ему размер

Из того, что я могу видеть, я думаю, что элемент сейчас равен 0x0 px.

Попробуйте добавить это к 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>
...