Html Css平移y使背景图像消失

当我在活动状态下使用translate-y时，元素出现问题，它会使背景图像消失。单击该元素，您将看到图像消失

Css：

.glyphsblock i {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 38px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center, center;
  border: 1px solid #fff;
  margin: 1px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all ease 0.1s;
}
.glyphsblock i:before {
  background: radial-gradient(#8ed3c8, #224945);
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}
.glyphsblock i:active {
  transform: translateY(2px);
}
.glyph-A {
  background-image: url(https://atlasdatabase.github.io/glyphs/a.png);
}

HTML代码：

<div class="glyphsblock">
    <i class="glyph-A"></i>
</div>

---

还有一个问题：重构CSS以删除可能产生不可预测结果的负z索引。这就是导致

变换发生故障并隐藏图示符图标的原因

我已经调整了您的代码段，因此现在
I
本身具有径向渐变，而
：：before
伪元素将字形图形放置在它上面

您可以在下面看到它正在工作：


.glyphsblock i{
背景：径向梯度（#8ed3c8，#224945）；
显示：内联块；
位置：相对位置；
宽度：38px；
高度：38px；
边框：1px实心#fff；
保证金：1px；
弹性收缩：0；
光标：指针；
过渡期：均为0.1s；
}
.glyphsblock i:：之前{
背景尺寸：包含；
背景重复：无重复；
背景位置：中心，中心；
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
}
.glyphsblock i：激活{
变换：translateY（2px）；
}
.glyph-A：：之前{
背景图片：url(https://atlasdatabase.github.io/glyphs/a.png);
}
这可能不是完全传统的做法，但我将您的JSFIDLE更改为使用一个大小的div作为背景，使用一个图像作为图标本身。如果您想使用多个图标，只需为当前称为glyphsblock的多个图标创建一个更大的包装器div

另外，我的解决方案没有任何javascript，这很有帮助：）


.bg梯度{
背景：径向梯度（#8ed3c8，#224945）；
宽度：38px；
高度：38px；
z指数：-1；
位置：绝对位置；
}
.glyphsblock:激活{
变换：translateY（2px）；
光标：指针；
过渡期：均为0.1s；
}

您可以替换transform:translateY（2px）；-->页边距顶部：2px；？如果你需要我做一个回答，实际上我想用translate，因为它比margin更平滑，使用margin不会产生平滑的“点击”效果。你知道为什么使用translate会让它消失吗？我不明白为什么-但它不起作用（你可以尝试不使用背景，再创建一个并为他设置背景-使用z-indexIt不能是页边空白顶部，因为它会移动同一个分区中的所有其他元素，即使在另一个分区中，它也会移动它们：我还需要背景图像，因为当用户单击它时，它会识别该块。你还在吗？如果是这样的话你想要什么-我写了一个问题谢谢你Jon，这和Dmitry的方法一样！现在就学会了！谢谢你，然后选择你的；）无论如何，很高兴看到很多人一如既往地在这里帮助你！谢谢大家！没有一个解决方案有JavaScript？我在单击部分使用的JavaScript，它添加了一个新类，使元素发光。