我想知道是否有任何方法可以对文本应用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>
原文地址:https://www.jb51.cc/css/242414.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。