HTML

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。

main
Hello
pool-1-thread-1
pool-1-thread-1
pool-1-thread-1
scala-execution-context-global-14
scala-execution-context-global-14
scala-execution-context-global-14

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

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;
}

处理图像的CSS图像替换和透明图像

HTML

CSS

1 个答案: