当前位置主页 > 资料库 > 前端教程 > HTML5 SVG制作精美的文字遮罩效果

HTML5 SVG制作精美的文字遮罩效果

2015-02-12

HTML5 SVG可以制作出许多绚丽的动画和效果,在这个教程中,我们将要制作一种类似Photoshop的文字遮罩效果。如何使这种遮罩效果可以跨浏览器使用是我们的研究重点。

这个SVG文字遮罩效果的思路是在文字下面放一张图片,然后通过CSS使文字以外的区域不可见。如果单纯的使用HTML代码来完成这种效果,只有使用像Flash/Silverlight之类的工具。而使用SVG来制作则可以十分轻松的完成。

我们将使用下面的这张图片来作为文字的背景:

文字背景图片

我们可以有两个解决方案。第一种是使用CSS来制作。通过CSS的mask属性也可以实现文字遮罩效果:

#myImg {
  mask: url(#myMask);
}                                
                            

这个解决方案十分直接简单,但不幸的是,它不能在webkit内核的浏览器上工作,如google chrome浏览器。

第二种解决方案是使用SVG。将一个SVG对象放置在一张图片上面,SVG中包含要制作遮罩效果的文字。SVG对象可以使用z-index属性直接放到图片的上面,或者将SVG放到一个div中,将div的背景设置为图像。这两种方法都可以制作出遮罩效果。

下面是最终的文字遮罩效果:

Welcome

SVG文字有5像素的描边和边部100%的透明度,文字的填充使用50%的透明度。

本例的HTML代码如下:

 <div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="0" y="120" id="theText" fill="#000">Welcome</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
  </svg>
</div>                               
                            

CSS代码如下:

#bkDiv
{
  background-image : url('my_image.jpg');
  height:130px;
  width:550px;
}

#theText
{
  font-size:140px;
  font-family:impact;
  stroke:#000;
  stroke-width:5px;
  fill-opacity:0.5;
}                                
                            

我们还可以使用CSS3来制作遮罩文字的背景动画,这将是更有趣的效果,我们将在后面的教程中讲解这些技术。

Previous:
上一篇:HTML5 canvas画图及图片上传服务器
Next:
下一篇:HTML5 SVG和CSS3制作动态文字遮罩背景特效
返回顶部