Question

当我在活动状态下使用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>

也是问题的一个方面：https://jsfiddle.net/go0tbb53/

Answer 1

重构CSS以删除否定z-index，这会产生不可预测的结果。这是导致transform出现故障并隐藏字形图标的原因。

我已经调整了你的代码段，所以现在i本身有径向渐变，而::before伪元素正在将字形图形放在它上面。

您可以在下方看到它：

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

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

Answer 2

这可能不是完全传统的，但是我改变了你的jsfiddle以使用大小的div作为背景和图标本身的图像。如果您想使用多个图标，只需为当前称为glyphsblock的多个图标创建一个更大的包装器div。

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

.bg-grad {
  background: radial-gradient(#8ed3c8, #224945);
  width: 38px;
  height: 38px;
  z-index: -1;
  position: absolute;
}

.glyphsblock:active {
  transform: translateY(2px);
  cursor: pointer;
  transition: all ease 0.1s;
}

<div class="glyphsblock">
  <div class="bg-grad">
  </div>
  <img src="https://atlasdatabase.github.io/glyphs/a.png" height=38px width=38px/>
</div>

Css翻译y使背景图像消失

2 个答案: