• 原文地址：codrops
• 原文作者：Sara Soueidan

在线预览 下载源码

在本文中，我们将探讨几种可用于创建纹理文本或将背景应用于文本的小技巧。

请记住，本文中介绍的一些技术是实验性的，浏览器支持非常低，在构建需要广泛浏览器支持的实际项目时可能不是最好的实现。

我已经为每个演示提供了一个屏幕截图，每个技术结束时也会有演示的链接。

图像应用于文本背景

-webkit-background-clip: text

我们将从CSS background-clip属性开始，并使用它来获得以下效果：

CSS background-clip属性确定元素的背景绘制区域。 默认情况下，背景被裁切到border-box的边框位置，它可以设置为其他值，如padding-box和content-box，这些都是不言自明的。

可以使用此属性创建不同的效果，例如赋予元素透明边框，在所有现代浏览器中都得到了很好的支持。

background-clip属性在Webkit中使用第四个值text进行了扩展，这会使背景图像剪切为前景文本（包括装饰和阴影）。 然后，通过使用仅Webkit属性-webkit-text-fill-color为文本提供透明颜色，背景图像将通过文本显示，从而完成剪切效果。

在撰写本文时，background-clip属性的文本值不是任何标准的一部分，因此不幸的是它只能在WebKit浏览器中工作，并且可以为其他浏览器提供简单的CSS回退，或者使用polyfill提供其他后备。

现在，我们将使用-webkit-background-clip属性创建一个带背景的文本，并提供一个仅CSS的回退，它将在非WebKit浏览器的文本下显示图像。

对于我们的演示（如上面的屏幕截图所示），我们有一个有背景的元素，它内部有一个标题，我们想要剪切其背景，使其看起来好像背景仅应用于其中的标题文本。

<div class="container"><!-- the element whose background we're going to clip --><div class="clipped"><h1>CO<br/>OK</h1></div><!-- arbitrary content --><p><span>The #1 cooking magazine in the world.</span> New healthy and delicious recipes every week. Subscribe to the weekly issue of COOK magazine and stay up-to-date on the latest kitchen trends and tips anc tricks from the world's #1 chefs. <br/>Download our app available for Android, iOS and Windows phones.</p>
</div>
复制代码

我们将使用“宽字体”，以便通过文本更清晰地看到背景。 .clipped元素将获得一个背景图像，我们将background-clip的属性值设置为text来剪切文本。 我们要将文本颜色设置为白色，因为非WebKit浏览器会在图像顶部显示文本，我们需要选择在我们选择的背景上可读的字体颜色。 然后我们将文本的填充颜色设置为透明，这将覆盖WebKit浏览器中的白色文本颜色，以便背景图像可以显示。

.clipped {background: url(../img/kitchen.jpg) no-repeat center center;background-size: cover;color: #fff;text-align: center;padding: 2em;/* -webkit-background-clip clips the background of the element to the text */-webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */-webkit-background-clip: text;
}
复制代码

查看demo1:使用background-clip属性实现文本背景

如果您在非WebKit浏览器中查看演示，您将在背景图像上看到白色文本。

在非WebKit浏览器中显示不透明文本背后的背景图像可能是图像在传达可视消息中起重要作用的最佳后备，但如果您在背景中没有图像，也可以回退到常规文本。 Divya Manian撰写了一篇很好的文章，解释了如何实现常规文本后备，Rachel Nabors根据Divya的代码创建了一个Sass mixin，并且已经在Codepen上提供，如果你愿意的话也可以使用它。

现在，就像我们将图像背景应用于文本一样，您也可以应用渐变背景。 因为CSS中的渐变是图像，所以可以对上面的.clipped元素应用渐变，结果将是具有渐变背景的文本。Riza SelçukSaydam在Codepen上创建了一个非常好的交互式逐步演示，它演示了如何制作文本渐变。 您可以查看它以获得有关此技术的更直观的解释。

mask-image: url()实现纹理文本

我们将要讨论的以下CSS技术目前仅在WebKit浏览器中支持（请参阅此处的支持表），并带有-webkit前缀。

我们将使用CSS mask来创建漂亮的纹理文本效果。 CSS Masking是一个W3C工作草案，希望不久之后其他浏览器也会开始实现它。

但就目前而言，我们将创建一个目前仅适用于WebKit浏览器的演示，并且我们将为不支持的浏览器提供简单的后备。 我们将使用CSS的mask-image属性将splatter效果应用于文本以获得如下结果：

当我们使用CSS masks,时，我们正在使文本采用其蒙版图像的形状，而不是像上面的背景剪辑技术那样使图像采用文本的形状。

mask-image属性采用以下三个值之一：具有Alpha不透明度的图像，其中透明区域将是不显示内容的区域，CSS渐变或无。 对于我们的演示，我们将使用具有alpha不透明度的图像，如下所示：

图像代表了一堆我们想要应用于文本的油漆泼溅物，使文字看起来像是上面有一些水彩颜料。 不支持的浏览器只会显示文本而不会应用泼溅效果。

将此蒙版应用于文本或任何其他内容时，文本将显示在黑色喷溅的位置，而蒙版图像是透明的部分，文本将不会显示。 您可以将文本（或内容）想象为图层，将蒙版想象为另一个图层，然后想象将蒙版图像放在文本顶部，然后获取橡皮擦并开始删除未覆盖的文本的所有部分 通过那些黑点，你将最终得到掩盖的文本，如上面的演示截图所示。

为了使效果更逼真，我在包含该文本的元素中添加了水彩背景，该文本将通过文本显示“已删除”，因此很好地将文本与其背景混合。 所有这一切，仅使用CSS。 挺整洁的吧？ 目前浏览器支持太糟糕了。 但是我们将在下一节重新讨论这种效果以跨浏览器工作。

现在，对于我们的演示，我们有一个包含两个标题的容器：

<div class="container><h1>Art</h1><h2>Digital Magazine</h2>
</div>
复制代码

我们将splatter效果应用于h1元素。 这是相关CSS：

.container h1 {font: 35em/100% "Oswald", sans-serif;margin: 0 auto;padding: 0;text-align: center;color: #fff;/* the property that creates the splatter effect */-webkit-mask-image: url(../img/splatter-mask_1.png);mask-image: url(../img/splatter-mask_1.png);
}
复制代码

这就是实现这种效果所需的一切。 现在，当然你会想要添加一些额外的样式，就像我在演示中所做的那样，这取决于你所经历的整体效果，但是当你使用蒙版为文本添加纹理时，一行CSS是非常重要的。

这里要注意的一件重要事情是，当在其他浏览器中实现此属性时，-webkit-前缀可能是也可能不是您需要的唯一前缀。 在编写本文时，您需要为此添加-webkit-前缀，如果您在项目中使用此技术，请确保在规范或浏览器支持该属性时更新代码。

查看demo2 mask-image: url()实现纹理文本

该演示将在不支持的浏览器中显示常规的文本。

您可以在W3C规范中阅读有关CSS Masking的更多信息，并在Trent Walton的这篇文章中查看另一个细微纹理文本示例。

使用SVG创建纹理文本

上面的两种效果都可以使用SVG重新实现，使用SVG实现的结果是可以跨浏览器的，因此您可以使用SVG方法作为上述CSS属性的非支持浏览器的回退。

使用SVG <clippath>剪切文本背景

首先，我们将使用SVG的元素重新创建CSS background-clip实现的文本效果。

剪切路径确定要应用背景的形状或区域。 背景中位于定义形状之外的部分将不会被绘制，并且只有给定形状内的部分才会被绘制。

剪切路径可以采用多个值，其中一个是元素。 当剪辑路径设置为文本元素时，背景将被剪切为所用文本的形状。

一旦定义了剪切路径（我们将立刻得到代码），可以使用clip-path引用该路径，作为我们想要剪辑的图像的属性，或者作为该图像的CSS属性。

让我们首先定义我们想要用来剪辑图像的剪辑路径，在我们的例子中，这只是我们想要显示背景图像的单个单词。

首先，我们创建一个包含所有SVG代码的SVG元素。 然后我们将定义剪辑路径并通过clip-path属性将其应用于图像元素：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200" height="400" viewBox="0 0 1200 400"> <!-- add title for accessibility --><title>Adding Background to Text using SVG clipPath</title> <defs>  <clippath id="my-path"><text x="50" y="300" font-size="200" >WATERCOLOR</text></clippath></defs><image xlink:href="img/watercolor_1.jpg" clip-path="url(#test)" width="100%" height="100%" preserveAspectRatio="none" />
</svg>
复制代码

因为SVG元素基本上是图形，所以请确保包含标题，以便屏幕阅读器可以访问它。

在上面的代码中，我们创建了一个文本元素，给定了字体大小，并定义了x和y坐标，这些坐标确定了在SVG中绘制文本的位置。 然后，我们将我们的文本元素放在clippath元素中，我们已经给出了一个ID，以便我们能够引用它。 然后，我们将clippath元素放在defs元素中。 defs元素可用于存储不直接显示的内容。 然后，这些存储的隐藏内容可以被其他SVG元素引用和显示，这使得它非常适合包含可重用图形的模式。 在我们的例子中，它非常适合定义我们想要在图像属性中引用剪辑路径的目的。

接下来，我们添加了我们的图像，给它一个宽度和一个高度，并将preserveAspectRatio设置为none，这样它的宽高比就不会被锁定，因为如果不这样，那么它们的高度和宽度都不会应用。

最后，我们使用图像上的clip-path属性引用了我们定义的剪切路径。 clip-path属性将clippath元素的ID作为其值，并将剪切路径应用于图像。

查看demo3 使用SVG创建纹理文本

您可以通过使用CSS应用它，而不是使用clip-path属性引用剪辑路径，如下所示：

image {clip-path: url(#my-path);
}
复制代码

这应该在所有现代浏览器中都可以正常展示：Chrome，Safari，Opera，Firefox和IE9 +。 所以，如果你想使用CSS background-clip：text; 例如，你可以使用Modernizr检查浏览器对background-clip：text的支持，并提供SVG作为非支持浏览器的后备，这是Tim Pietrusky的polyfill所做的，相比使用背景 图像并使用clippath剪切它，使用SVG模式能够更好的实现剪辑的图像填充文本背景。 在下一节中，我们将在SVG中使用模式填充文本。

使用SVG <pattern>来填充文本背景

因此，我们可以将背景或图案应用于文本的另一种方法是使用图案填充文本，而不是使用背景图像并将其剪切到文本。 对于本演示，我们将使用SubtlePatterns提供的图案填充文本。

当你使用装饰字体时，使用图像并将其剪切为文本可能是一个很好的选择，就像我们在第一个演示中所做的那样，或者我们想用一个大的图像作为文本的背景，因为这个背景扮演了一个重要的角色。 但有时候，我们想要做的只是在文本中添加一个简单而细微的模式，使其具有额外的美妙触感，使其不那么沉闷。 在这种情况下，使用SVG，我们可以像在上一节中定义剪切路径一样定义模式，然后我们可以使用该模式填充文本。

与之前的演示类似，我们有一个SVG元素，其中为可访问性添加了标题，我们想要用模式填充的文本元素，以及我们将用于定义模式的defs元素。 该模式由一个图像组成，并具有一个ID，当我们想要引用它并将其应用于我们的文本时，我们将使用该ID。 我们将在文本的fill属性中引用模式，或者通过文本的CSS fill属性引用模式。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="400" > <!-- add title for accessibility --><title>Applying a patterned background to text in SVG</title> --><!-- Source: http://lea.verou.me/2012/05/text-masking-the-standards-way/ --><defs><pattern id="filler" patternUnits="userSpaceOnUse" width="400" height="400" ><image xlink:href="img/purty_wood.png" width="1200" height="600" preserveAspectRatio="none" /></pattern></defs><text x="100" y="70%" font-size="200" fill="url(#filler)">WOOD</text>
</svg>
复制代码

与之前的演示类似，您可以通过CSS引用模式，如下所示：

text {fill: url(#filler);
}
复制代码

查看demo4，支持所有现代浏览器：使用SVG填充文本背景。

此时，值得注意的是，您不仅可以将图像用作SVG模式，而且正如我们之前提到的那样，渐变也是图像，您还可以创建SVG渐变并使用它来填充文本，而不是：

在SVG中创建和使用渐变很简单。 渐变被创建为radialGradient或linearGradient元素，并被赋予一个ID，然后在fill属性或CSS属性中引用，就像我们使用上面的一样。 这是一个简单的例子，其中使用渐变来填充文本。

查看demo5 使用渐变填充文本背景

当然，也可以将渐变设置为容器的背景图像，然后我们可以使用clippath剪切背景，就像我们在上一节中所做的那样。

使用SVG <mask>将纹理应用于文本

就像我们可以使用CSS mask-image属性将图像蒙版应用于元素一样，我们也可以应用相同的蒙版概念并使用SVG蒙版获得相同的效果。

图像的不透明和透明区域将决定元素的绘制位置，就像我们在上一节中使用CSS mask-image属性看到的那样。 但是，CSS图像蒙版和SVG图像蒙版之间存在一个重要区别：与CSS蒙版不同，SVG蒙版使用蒙版中的亮度值来确定被遮罩的内容，而不是阿尔法值。 因此，由黑色和透明区域组成的图像，例如我们上面使用的喷溅遮罩，将必须被由白色和透明区域组成的图像替换。 因此，如果我们要重新创建与上面创建的相同的泼溅文本效果，我们将不得不使用如下所示的蒙版图像：

可以在Photoshop中轻松将Alpha通道图像蒙板转换为亮度图像蒙版，应用白色覆盖将黑色区域变为白色，这就是我用适合SVG蒙版的CSS图像蒙版替换CSS图像蒙版的方法。 在上面的图像中可见的浅灰色区域实际上是透明的，我只是给了图像这个背景，所以你可以看到白色的飞溅，否则在这篇文章的白色背景上看不到。

现在，就像我们定义SVG剪切路径和模式一样，我们可以以类似的方式定义我们的蒙版并将其应用于我们的文本。

我们将创建一个包含在SVG mask元素内的图像，该元素将获得一个ID以便可以引用它，并且mask将被包装在defs元素内，该元素用于定义我们的蒙版而不直接渲染它。

所以它就像是说：我们定义一个SVG mask，它是一个带有以下URL（上面的亮度mask的URL）的图像，然后我们将这个mask应用到我们的text元素上的mask属性，当然也可以使用mask属性的CSS。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="380" > <!-- add title for accessibility --><title>Adding Texture to Text using SVG Masks</title><defs><mask id="mask"><image width="1200px" height="1200px" xlink:href="img/splatter-mask_luminance.png" preserveAspectRatio="none"/></mask></defs><text x="50" y="70%" font-size="168" fill="white" mask="url(#mask)">WATERCOLOR</text>
</svg>
复制代码

为了完成效果，我将水彩背景添加到主svg元素，使其看起来像文本被混合到该背景中。

查看demo6在各浏览器中的效果。

使用HTML5 <canvas>创建纹理文本

我们将要讨论的最后一种技术使用HTML5 <canvas>元素来创建上述效果。 使用<canvas>，您还可以将元素“剪切”为另一个元素的形状，使用纹理“填充”文本，并通过更改画布的context的 globalCompositeOperation属性的值，将类似蒙版的效果应用于文本。

在我们了解它之前，让我们定义我们的标记，因为它与我们将要介绍的3种技术的标记相同。

我们有一个canvas元素，我们为其指定高度和宽度，在结束标记之前，我们将添加一个文本内容，供屏幕阅读器阅读，以及禁用JavaScript的浏览器回退。 但需要注意的是，当JavaScript被禁用时，Firefox不会将文本显示为画布的后备，这可能是一个错误。

<canvas id="canvas" width=1000 height=600 >WATER
</canvas>
复制代码

现在我们准备好了标记，让我们开始绘制一些带纹理的文本！

对于我们的第一个演示，我们将在画布上创建一个文本，并使用我们选择的模式填充它以获得以下结果：

我们将获得canvas元素及其绘图context，然后我们将创建一个图像，并将该图像用作文本的填充样式。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//create image we're going to use as a fill pattern
var img = document.createElement("img");
img.src="img/water.jpg";
//draw the text
img.onload= function(){drawText();
}
//function that draws the text and fills it with the texture from the img
function drawText() {ctx.font = "bold 200pt Oswald";ctx.fillStyle = ctx.createPattern(img, 'repeat');ctx.textAlign = 'center';var x = canvas.width / 2; ctx.fillText("WATER", x, 400);ctx.fill();
}
复制代码

那么，让我们回顾一下上面的代码。 所有绘图都发生在drawText函数中。 我们将在context的font属性中定义字体样式，然后使用context的createPattern方法，我们将从之前创建的图像中创建一个模式，然后我们将该模式设置为 fillStyle属性的值，当然，它确定字体的填充样式。 最后但并非最不重要的是，我们实际上将使用fillText方法在画布上绘制文本，该方法接收一个字符串，它是我们想要绘制的文本的内容，以及一些x和y坐标， 正如您可能已经猜到的那样，确定将在画布上绘制文本的位置。

查看demo7

这里有一点需要注意：当你在画布中使用自定义字体时，你可能无法看到自定义字体呈现，因为画布绘图可能在字体加载之前发生。要解决这个问题，您可以使用字体加载器，如Typekit和Google开发人员开发的 Web Font Loader，并在加载字体后在画布上绘图：

WebFontConfig = {google: { families: [ 'Oswald' ] },fontactive: function() {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var img = document.createElement("img");img.src="img/water.jpg";img.onload= function(){drawText();}function drawText() {ctx.font = "bold 200pt Oswald";ctx.fillStyle = ctx.createPattern(img, 'repeat');ctx.textAlign = 'center';var x = canvas.width / 2; ctx.fillText("WATER", x, 400);}}
};
(function() {var wf = document.createElement('script');wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';wf.type = 'text/javascript';wf.async = 'true';var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(wf, s);
})();
复制代码

演示文件都将使用这种技术，但我会在这里保持简单，只在下面的示例中向您展示该技术的相关功能。

现在，转到下一个技术，我们将通过更改context的globalcompositeOperation属性的值在画布上创建类似剪辑的效果。 最终结果如下所示：

canvas context的附带属性globalcompositeOperation，它定义了所谓的“源”和“目标”之间的复合操作。也就是说，它定义了您想要绘制的内容将如何与在画布上绘制的内容混合。源是您要绘制的内容，目标是在设置globalCompositeOperation属性之前已经绘制的内容。我们可以在现有形状后面绘制新元素或形状，并使用此属性清除某些区域，甚至从画布中清除部分。

globalCompositeOperation可以使用16个值中的一个，这些值中的每一个都在MDN的可视示例中清楚地展示，因此如果您还不熟悉此属性，请检查一下，因为这些示例将帮助您更好的理解。这是每个值的结果的屏幕截图。在演示的源代码中，目标是首先在画布上绘制蓝色矩形，源是在设置globalCompositeOperation值后绘制的红色圆圈。

此属性的source-in值可以用简单的翻译为“仅绘制它们相交的源和目标的部分/区域”。 因此，如果您有两个元素，一个是已经绘制的，另一个是您想要继续绘制的元素，那么结果将是只绘制这两个元素相交的区域。

为了更好地理解这一点，让我们马上进入代码。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");var img = document.createElement("img");
img.onload = function () {drawText();
}
img.src="img/fire.jpg";
function drawText() {// put text on canvasctx.font = "bold 180pt IM Fell Great Primer SC";ctx.fillStyle = 'white';ctx.textAlign = 'center';var x = canvas.width / 2;ctx.fillText("FIRE", x, 325);// use compositing to draw the background image only where the text has been drawnctx.globalCompositeOperation = "source-in";ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
}
复制代码

在上面的代码中，在drawText函数中，我们有3个“sections”，用于定义将在画布上绘制的结果。 第一部分是我们定义文本的地方，包括它的所有样式，然后我们继续使用fillText方法绘制它。 接下来，我们将context的globalCompositeOperation设置为source-in。 然后，我们在画布上绘制图像。

所以你看，在这种情况下，“source”是我们想要在设置globalCompositeOperation（图像）之后绘制的元素，而“destination”是我们在设置它之前绘制的文本。 通过将值设置为source-in，我们告诉浏览器仅在此图像与文本相交的区域中绘制图像，这正是我们想要获得的效果。

一旦你了解globalCompositeOperation的每个值，你可以快速轻松地开始使用它们，并且再次确保检查MDN上的可视化示例，因为它们有很多帮助。

当你检查它们时，你会注意到如果我们将值设置为source-atop，结果对于我们的演示也是一样的。 source-atop告诉浏览器绘制与目标（文本）相交的源（图像）的部分/区域，并绘制目标的其余区域，即使那些与源不相交的区域，也在我们的 这种情况，也会产生我们想要的效果。

查看demo8

注意：在撰写本文时，并非所有浏览器都支持全局复合操作属性的所有值。

最后，我们将使用canvas创建另一个效果，但这次我们将在文本中添加一些纹理以将其混合到背景中，就像我们之前使用SVG和CSS的技术一样。 该演示将如下所示：

我们将使用带有alpha通道的图像作为我们的“蒙版”，我们希望仅在与图像的黑色区域相交的位置绘制文本，并在图像透明的地方“擦除”图像。 因此，我们希望我们的源和目标只能在它们相交的地方绘制。 根据这个逻辑，以及globalCompositeOperation值的上述截图，我们将要使用source-in值来获取我们所追求的结果。

下面是我们用作“蒙版”的图像。 黑色区域是图像与文本相交的位置。 就像我们在CSS masking部分中所做的那样，您可以想象文本的一个图层和此图像的另一个图层，将它们放在彼此的顶部，然后擦除图像或文本不相交的部分，相交的部分，就是想要获得的最终效果。

Javascript代码与上面的代码相同，只有globalCompositeOperation的值不同，所以我们将直接跳到演示，在那里您可以查看源代码并体验它。

查看demo9

在这里，我们再次为画布添加了背景，使混合效果更加逼真。 我们有“划痕”的背景和有划痕的文字很好地融合在一起。

结语

我希望你从这篇文章中学到了一两种新技术。 我认为我们已经涵盖了使用CSS和HTML创建纹理文本的大多数可能方法。 我最喜欢的技术必须是SVG，因为它具有更广泛的浏览器支持。 当所有浏览器都支持CSS masks和background-clip的文本值时，我们可以开始使用它们而不必过分担心提供回退，然后CSS绝对是我们的最佳选择。

我希望你发现这篇文章很有用。 谢谢你的阅读！=）

你知道在文本中添加纹理的其他技巧吗？ 如果有，请确保在下面的评论中分享！