【SVG】使用CSS和SVG制作带纹理文本的三个技巧

作者：Terry2016.09.07来源：Web前端之家浏览：14014评论:0

关键词：html5 SVG

你也许能够熟练的使用PS对文本进行图像掩埋；一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像，你就可以在你的网站上使用；但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗？好消息是，确实可以！

CSS介绍了background-clip 和 mask-image的属性，或许你可以使用他们来创造相似的效果，就像你用PS创造出来的那样。最重要的是，你也可以使用SVG来进行文本图像剪辑。

在本文中，我们将会研究一下这些方案，甚至会尝试做一些简单的动画效果。如果你想查看详细的源代码，请点击下载这个文件

浏览器支持

可以预见，我们使用的一些性能并不是被浏览器普遍支持的，这意味着他们将在浏览器中失败，就像IE和火狐。好消息是这些性能将默默地衰退，意味着这些技术正在渐进增强，并且适用于网站。

使用BACKGROUND-CLIP来裁剪文本

我们第一个要研究的方法是 background-clip属性，这个属性将定义背景是否将被延伸到边界。可允许文本在图片上做截取。

HTML

我们的标记是一个简单的包含bgClip类的h1标签。

<h1 class="bgClip">Clip Text</h1>

现在，让我们用CSS添加魔法吧...

CSS

我们用夜空的图片来给文本添加效果，使用font-smoothing使文本渲染流畅。请注意使用这种方法的时候文本的颜色必须是透明的，所以我们同时也得使用text-fill-color:transparent.

.bgClip {
    background:url('../images/clouds.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

现在我们只要添加一点点的动画效果，让背景更加诱人：

    -webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
@keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
@-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
@-ms-keyframes BackgroundAnimated {    
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
@-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
`

结果如下:

使用SVG剪切文本

我们将研究的下一个技术是，SVG的剪切。类似上述的CSS方法，SVG也允许通过使用clipPath属性令文本在图片上做截取。

虽然clipPath包含的图形属性一般是圆形或者方形的，但是你也可以使用文本来剪切。

SVG

你将看见我使用HTML的<img>元素来剪切图像.

<img class="svg-clip" src="images/green.jpg"/>
<svg height="0" width="0">
    <defs>
        <clippath id="svgPath">
            <text x="175" y="420" textLength="1000"  lengthAdjust="spacing" font-family="Lemon" font-size="240px"> SVG Text </text>
        </clippath>
    </defs>
</svg>

虽然我在这里使用了.jpg格式的图，但是你也可以使用其他格式的图，甚至是视频。

CSS

现在，我们所有人不得不使用clip-path属性作为图像的剪切路径：

.svg-clip {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    margin:0 auto;
}

结果如下：

使用mask-image掩盖文本

我们将研究的最后一个技术是用mask-image使文本变形。这个属性的基础功能是对于文本外的不可见的区域进行剪切。

HTML

我们需要一个包裹在div元素里的h1元素：

<div id="maskText">
    <h1>Mask Text</h1>
</div>

CSS

为了用图像掩盖文本，我们将使用-webkit-mask-image指定图片，同时我们也可以添加一个text-shadow来添加阴影。

最后，我想添加一些效果，当鼠标悬停的时候将显示平滑的全文。

#mask-text h1 {
    font-size: 200px;
    font-family: 'Lilita One', sans-serif;
    color: #ffe400;
    text-shadow: 7px 7px 0px #34495e;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url('../images/texture.png');
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;
}
#mask-text h1:hover{
    -webkit-mask-image: url('../images/texture-hover.png');
    cursor: pointer;
    color: #ffe400;
}

结果如下：