在一个图片上面添加一个粗体的文字,文字的颜色透明,然后将文字以外的区域全部变成透明,只保留文字所在下面区域的背景图片。这个要怎么实现,完全没有头绪
背景图a、白底黑字文字图b、透明图c。
若 b==黑 ,则 c=a
这个效果是否正和你意?文字颜色透明一半(0.5),文字以外的区域全部变成透明,即显示全部背景。
<html> <head> <style> #content{ z-index:2; width:600px; height:400px; position:absolute; left:0px; top:0px; } #back{ width:600px; z-index:1; } </style> </head> <body> <canvas id="content"> </canvas> <img id="back" src="http://img.popoho.com/UploadPic/2008-2/20082772159593.gif"> </body> <script> g=document.getElementById("content").getContext('2d'); g.fillStyle= "rgba(255,0,0,0.5)" g.font="40px Arial Black"; g.fillText("Hello,", 10, 50); g.fillStyle= "rgba(100,255,255,0.5)" g.fillText("fangjinzhen.", 10, 100); </script> </html>
应该不是楼上的处理方式,我没有具体做过,但是我觉得思路是这样的,把文字转成图片,然后文字的图片像素与背景的图片做 & 操作,这样,背影图片就只剩下文字部分的像素,然后再把背影图片做半透明的处理,最终应该就是楼主需要的效果了。
谢谢,用这个方法实现了
背景图a、白底黑字文字图b、透明图c。
若 b==黑 ,则 c=a
这个效果是否正和你意?文字颜色透明一半(0.5),文字以外的区域全部变成透明,即显示全部背景。
应该不是楼上的处理方式,我没有具体做过,但是我觉得思路是这样的,把文字转成图片,然后文字的图片像素与背景的图片做 & 操作,这样,背影图片就只剩下文字部分的像素,然后再把背影图片做半透明的处理,最终应该就是楼主需要的效果了。
引用来自“金留庆”的评论
背景图a、白底黑字文字图b、透明图c。
若 b==黑 ,则 c=a
谢谢,用这个方法实现了