html - 如何在 css 和他的位置上处理 sprites 图像?
问题描述
在我作为前端开发人员的职业生涯中,我正试图克隆 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 等。
问题是我不知道我是否很好地定位了精灵,以便它向我显示我想要的图标。这是应该出现的图标的图像:
但是,这就是我得到的:
是的,我知道,很伤心 有人可以帮助我吗?
解决方案
我认为你只需要将元素设置为 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>
推荐阅读
- model-view-controller - 控制器方法不存在。但实际上是存在的。不通过请求传递值
- coq - 在 Coq 中如何划分两个 Nat?
- c++ - is there any way to partial instance a c++ template
- php - 将行移动到另一个表并插入其他值
- c# - 带任务的异步/等待,重构方法
- asp.net - MVC 项目中的 aspx 页面未读取 web.config
- reactjs - 当用户登录反应时,我需要更改登录以添加到购物车
- amazon-web-services - 向特定实例授予所有服务权限的 AWS IAM 策略
- linux - systemtap 中 .function() 和 .function().call 之间的区别
- aem - JCR/Sling - 节点属性包含 JSON 值是否有意义,或者是否应该创建相应的子节点?