Question

我的图像上面有文字图层。我希望图层中的文字是透明的，以便图像闪耀。

<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/

Answer 1

从图层类中删除背景属性。那么它只会显示文字透明。

.imgBox:hover .layer {
   opacity:0.1;

}

Answer 2

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

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

编辑：你不能用css隐藏文字。但是，您可以使用text-shadow创建轮廓效果。对不起，但您目前无法用css描述。

Answer 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背景的问题。

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

CSS：图像层中的透明文本？

4 个答案: