使用关闭图像和透明图像进行 CSS 图像替换

Question

我正在寻找一种 CSS 图像替换技术（例如 here 描述的图像替换）——你隐藏元素文本内容并改为显示图像——这将适用于透明图像并在图像关闭时显示替换的文本（例如通过 Windows 高对比度模式）。

我知道一些技术适用于具有非透明背景的图像，但当图像具有非透明背景时它们停止工作——元素的文本通过背景可见。

下面的这种技术的一个示例 - 在绝对定位的伪子元素上设置所需的背景，该伪子元素会呈现在元素上。问题：我要隐藏的文本仍然可见。

说明于this pen。

HTML

<div>Text which I want to replace by an image</div>

CSS

div {
  position: relative;
  width: 100px;
  height: 100px;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Perspective-Button-Go-icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

其他技术即使使用透明图像也会隐藏文本，但在禁用图像时不显示文本，这是我需要的。我正在寻找一种两者兼得的产品。

Answer 1

将已知的不透明图像放在顶部，其 z-index 低于替换图像，例如 1px x 1px 白色 png。

div {
    position: relative;
    width: 100px;
    height: 100px;
}

div::before,
div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div::before {
    background-image: url('/images/white-pixel.png');
    z-index: 1;
}

div::after {
    background-image: url("http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Perspective-Button-Go-icon.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2;
}

您可以更进一步，实际上对图像进行 base-64 编码并将其直接嵌入到样式表中：

div::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA‌​QAAAC1HAwCAAAAC0lEQV‌​R42mP8/x8AAwMCAO+ip1‌​sAAAAASUVORK5CYII=');
    z-index: 1;
}