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

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

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

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

回答:

它必须是动态的吗?唯一的方法是使用具有透明性的图像(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

以上是 我可以使用CSS字体进行剔除/穿透透明吗? 的全部内容, 来源链接: utcz.com/qa/406131.html

回到顶部