我可以使用CSS字体进行淘汰/穿透透明度吗?

前端之家收集整理的这篇文章主要介绍了我可以使用CSS字体进行淘汰/穿透透明度吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道是否有任何方法可以对文本应用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>

使用detination-out compositingdrawing text on the canvas.

原文链接:https://www.f2er.com/css/242414.html

猜你在找的CSS相关文章