我可以使用CSS字体进行剔除/穿透透明吗？

小编典典

我可以使用CSS字体进行剔除/穿透透明吗？

css

我想知道是否有什么方法可以对文本应用100％的透明度，以便我们可以在文本字符内看到页面的背景图片。

例如，假设我有一个<div>带有白色背景的，并且背景图片为<body>。我想将文字设置在内，<div>以便<body>尽管文字上有白色背景，也可以通过文字看到背景图片<div>。

我可能可以使用倒置字体，但如果有的话，我希望有一种更好的方法。

阅读 440

2020-05-16

共1个答案

小编典典

它必须是动态的吗？唯一的方法是使用具有透明性的图像（GIF或更好的PNG）。

我不确定这是否是您想要的，但还是会解释一下。

情况：您希望通过文字看到蜜蜂的背景不整洁。

解决方案：没有CSS可以解决这个问题。您必须使用值得信赖的图像编辑器来创建一个包含文本的图层，以及另一个将成为文本负数的图层

这可以使您产生一些有趣的效果，但是如果您希望它是动态的，则必须在运行中的服务器端生成图像。

目前，使用纯CSS不可能实现这种欺骗（Javascript可能可以实现）。

编辑

看到Paul在Webkit上的发现，使我开始思考如何在Firefox，Opera和IE中伪造该行为。到目前为止，我canvas在Firefox上使用元素已经很幸运了，我正在尝试查找中的某些行为filter:progid:DXImageTransform.Microsoft。

到目前为止canvas，这是我所做的

<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);

// set composite property
ctx.globalCompositeOperation = 'destination-out'; 
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);  
ctx.strokeText("red rectangle", 10, 40);

</script>
</body>
</html>

通过使用目标输出合成和在.NET上绘制文本canvas。

2020-05-16