我想知道是否有任何方法可以将100%的透明度应用到文本中,以便我们可以在文本中的字符内看到页面的背景图片。
例如,假设我有一个白色背景的<div>
和一个<body>
上的背景图像。我想设置<div>
中的文本,以便可以通过文本看到<body>
上的背景图像,尽管<div>
上的背景是白色的。
我可能会使用倒排字体,但如果有倒排字体的话,我会选择更好的方法。
最佳答案
它必须是动态的吗?唯一的方法是使用透明的图像(gif或png)。
我不确定这是否是你想要的,但无论如何都会解释的。
情境:你有一个非纯背景,你想通过你的文字看到。
解决方案:没有css来拯救这个。你必须使用你信任的图像编辑器来创建一个包含文本的层,另一个层将是你文本的负片
这可以让您产生一些有趣的效果,但如果您希望它是动态的,您将不得不在fly服务器端生成图像。
这种诡计目前在纯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,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>
通过使用detination-out compositing和drawing text on the
canvas
。