我可以用CSS字体敲出/穿透透明吗？ [英] Can I do knock-out/punch-through transparency with CSS fonts?
问题描述
我想知道是否有任何方法可以对文本应用100％的透明度，以便我们可以在文本中的字符内查看页面的背景图片。
p想象我有一个有白色背景的
< div> 和< body> 。我想将< div> 中的文本设置为< body> 可以通过文本看到，尽管< div> 上有白色背景。
它是否必须是动态的？唯一的方法是使用透明的图片（GIF或更好，PNG）。
我不知道这是否是你想要的，
情况：你有一个非纯背景，你想通过你的文本看到。
解决方案：没有CSS来为这个救援。您必须使用可信赖的图片编辑器创建一个包含文本的图层，以及另一个将作为文字否定的图层。
这可能允许您有趣的效果，但如果你想要它是动态的，你必须在飞行服务器端生成图像。
这种技巧目前不可能与纯CSS （可能使用Javascript）。
编辑
查看 Paul在webkit上的搜索让我想起了如何在Firefox，Opera中假冒这种行为和IE。到目前为止，我使用 画布 元素，我试图在 filter：progid：DXImageTransform.Microsoft 中找到一些行为。
到目前为止 canvas ，这是我做的
< html>
< body>
< canvas id =cwidth =150height =150>
< / canvas>
< script>
ctx = document.getElementById（c）。getContext（2d）;
//绘制矩形填充canvas元素
ctx.fillStyle =red;
ctx.fillRect（0,0,150,150）;
//设置复合属性
ctx.globalCompositeOperation ='destination-out';
//现在要添加的文本将裁剪红色矩形
ctx.strokeText（Cropping the，10，20）;
ctx.strokeText（red rectangle，10，40）;
< / script>
< / body>
< / html>使用 rel =nofollow noreferrer> detination-out compositing and 在<$ c上绘制文字$ c> canvas 。
I would like to know if there is any way I can apply 100% transparency to text so that we can see the background picture of the page within the characters in the text.
i.e. imagine I’ve got a <div> with a white background, and a background image on <body>. I’d like to set the text inside the <div> so that the background image on <body> can be seen through the text, despite the white background on the <div>.
I could probably use an inverted font but I would prefer a better way to do it if there is one.
Does it have to be dynamic? The only way to do that is with an image with transparency (GIF or, better, PNG).
I'm not sure if this is what you want, but will explain it anyway.
Situation: you have a non plain background that you want to bee seen through your text.
Solution: no CSS is coming to the rescue for this. You'll have to use your trusty image editor to create a layer with text, and another layer that will be the negative of your text
This could allow you to have some interesting effects, but if you want it to be dynamic, you'll have to generate the images on the fly serverside.
This kind of trickery is currently impossible with pure CSS (might be possible with Javascript).
Edit
Seeing Paul's find on webkit got me thinking on how to fake that behavior in Firefox, Opera and IE. So far I've had good luck using the canvas element on Firefox, and I'm trying to find some behavior in filter:progid:DXImageTransform.Microsoft.
So far with canvas, this is what I did
<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>
by using a detination-out compositing and drawing text on the canvas.
这篇关于我可以用CSS字体敲出/穿透透明吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
