CSS：图像上的透明文本？答案

【问题标题】：CSS: Transparent text in layer over image?CSS：图像上的透明文本？
【发布时间】：2014-08-03 10:49:56
【问题描述】：

我有一个带有文本层的图像。我希望图层中的文本是透明的，以便图像能透出来。

<div class="imgBox">
    <div class="layer">X</div>
    <img src="http://www.eronn.net/camera/test-chart/hue-saturation%20test%20chart%201.jpg" />
</div>

CSS：

.layer {
    position:absolute; left:0;
    width:100px;
    height:100px;
    text-align:center;
    font-size:5em;
    font-weight:bold;
    background:#ddd;
    opacity:0.5;
    color:#aaa; /* make transparent */
}

测试：http://jsfiddle.net/6X5JF/

【问题讨论】：

你所说的“闪耀”是什么意思？
好像 X 是从背景中剪下来的。
不可能 AFAIK，解决方法是使用图像（带有“文本剪切”的实心块）
background: transparent;
见这里：blog.ericzhang.com/punch-through-text-masks-with-css-and-html5 canvas 东西对我来说是新的，但它看起来很适合以编程方式创建图像。

标签： css transparency transparent layer

【解决方案1】：

从图层类中移除背景属性。那么它只会将文本显示为透明。

.imgBox:hover .layer {
   opacity:0.1;

}

【讨论】：

诀窍是让图层有背景。

【解决方案2】：

将background:transparent; 添加到.layers 请注意，演示中的文本仍然是不透明的，因为opacity 在CSS 中总是被继承，与大多数其他属性不同，不透明的继承是严格的。

http://jsfiddle.net/r3wt/mjy8w/1/

编辑：您不能使用 css 显示不可见的文本。但是，您可以使用text-shadow 创建轮廓效果。抱歉，您所描述的内容目前无法使用 css。

【讨论】：

谢谢，文本现在使用比背景更浅的颜色，文本阴影更亮。

【解决方案3】：

您也可以使用rgba()。

.layer {
    position:absolute; left:0;
    width:100px;
    height:100px;
    text-align:center;
    font-size:5em;
    font-weight:bold;
    color:rgba(170,170,170,.5); /* make transparent */
}

编辑：就像一个加号。我不知道这是否是你所指的，但我会像我玩东西一样添加它。我现在觉得您想要这样的东西，保留透明布局可见，而不删除它或使其 100% 不可见（根据您对 Imamul 所说的话）。我对html做了一点改动，使文本应用.layer:after。问题在于，目前它仅适用于 Firefox 和 safari :p 所以，就像我说的，只是将其添加为加号或好奇心，而不是“解决方案”。它使用 mix-blend-mode 属性 (https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)。不要惩罚我 :p 如果你改变.layer 的位置，你可以看到文本如何与.layer 融合，以及它似乎如何反映背景图像。不是同一种颜色，但很有趣，不是吗？您可以使用它和不同的混合模式。总有一天，我希望其他浏览器也能支持它。

注意： 在 Firefox 上，您需要将 layout.css.mix-blend-mode.enabled 更改为 true。

您可以在http://jsfiddle.net/soulchainer/nVm5j/5/ 中查看它的运行情况

.layer {
position:absolute; left:0;
width:100px;
height:100px;
text-align:center;
font-size:5em;
font-weight:bold;
background:#ddd;
opacity:0.5;
color:#aaa; /* make transparent */
mix-blend-mode: screen;
}
.layer:after {
    content:"X";
    mix-blend-mode: difference;
}

编辑 2： 无论如何，对于您似乎想要做的真实事情，也许最好的解决方案是使用“空字体”，一种只有边框可见的创意字体。但是，如果您不使其 100% 透明，您将再次遇到 .layer 背景的问题。

【讨论】：

不会让图像通过：/
@Martin 你能分辨出两者之间的区别吗：jsfiddle.net/mjy8w/3 和jsfiddle.net/r3wt/mjy8w/1 屏幕截图i.stack.imgur.com/oDpFf.jpg
哦。如果你愿意的话，你可以再次贬低我，@GCyrillus，如果那是你消除他们贬低声誉的动机：是我投票赞成 Imamul（显然，我是说他也投票反对他，只是我修复了那）。当他甚至清楚地解释自己时，我只是认为被否决的人是不公平的。他只能评论说那不是他想要的并澄清它，但他先是投了反对票，后来又解释了一些事情。我失去了帮助他的意愿，也懒得回答。对您造成的误解，我深表歉意。
抱歉，这不是我的本意。我认为这会否决答案。它不允许我撤消投票，因为它已超过 3 小时。
已接受道歉 ;) 当然，声望下降是可以使用的（在需要时），但下次一定要更清楚你的问题。如果您看到不止一个人误解了您，只需编辑并澄清您的问题。因为也许这就是问题的一部分。而不是很快投票。感觉……不公平。当您回答“不会使图像发光”时，我什么也没得到。就像我没有足够的声誉一样，我没有投反对票（但我想要）。我也没有足够的声誉来评论答案，所以我必须冒险自己回答。问候。

【解决方案4】：

您可以尝试使用 -webkit-background-clip:text 来完成此操作

body {
  background: url(YOUR BG IMG);
}
.time { 
  background-color:#f2f2f2;
}
span { 
  background: url(YOUR BG IMG);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

【讨论】：