我想知道是否有任何方法可以对文本应用100％透明度,以便我们可以在文本中的字符内看到页面的背景图片.
即想象我有一个< div>白色背景,< body>上的背景图片.我想在< div>中设置文字.使< body>上的背景图像尽管< div>上有白色背景,但可以通过文字看到.
我可以使用倒置字体,但如果有的话,我希望有更好的方法.
解决方法
它必须是动态的吗？唯一的方法是使用透明图像(GIF或更好的PNG).
我不确定这是不是你想要的,但无论如何都要解释.
情况：您希望通过文本看到非普通背景.
解决方案：没有CSS可以解决此问题.您必须使用可靠的图像编辑器来创建包含文本的图层,并使用另一个图层作为文本的否定图层
这可能会让你有一些有趣的效果,但是如果你想要它是动态的,你必须在飞行服务器端生成图像.
对于纯CSS,这种技巧目前是不可能的(使用Javascript可能是这样).
编辑
看到Paul’s find on webkit让我思考如何在Firefox,Opera和IE中伪造这种行为.到目前为止,我已经在Firefox上使用canvas元素运气好了,我试图在filter中找到一些行为：progid：DXImageTransform.Microsoft.
到目前为止,使用画布,这就是我所做的
<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,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",40);
</script>
</body>
</html>
